27 |
9 |
29 |
56 | `;
57 |
--------------------------------------------------------------------------------
/src/util/graph-templates/graph-helpers/rowHelpers/styleRowName.js:
--------------------------------------------------------------------------------
1 | import util from '@/util/graph-templates/template-utils';
2 | import getRowName from './getRowName';
3 |
4 | export default function (selection) {
5 | selection
6 | .text(getRowName.bind(this))
7 | .attr('x', () => {
8 | if (this.isMobileView) return 0;
9 | return this.data.meta.series.length > 1 ? -this.padding.left + 10 : -10;
10 | })
11 | .attr('y', () => (this.isMobileView ? 15 : this.rowHeight / 2 + 4))
12 | .attr('text-anchor', () => {
13 | if (this.isMobileView) return 'start';
14 | if (this.data.meta.series.length > 1) return 'start';
15 | return 'end';
16 | })
17 | .style('cursor', (d) => {
18 | if (d.noLink) return false;
19 | return (this.isCompare && !d.totalRow) || (!this.isCompare && d.totalRow) ? 'pointer' : false;
20 | })
21 | .style('text-decoration', (d) => {
22 | if (d.noLink) return null;
23 | const isDistrict = util.allDistricts.some((district) => district.value === d.geography);
24 |
25 | return (this.isCompare && !d.totalRow) || (!this.isCompare && d.totalRow) || isDistrict ? 'underline' : false;
26 | });
27 | }
28 |
--------------------------------------------------------------------------------
/src/util/graph-templates/locale.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Norwegian date and number formatting.
3 | */
4 |
5 | import { formatLocale } from 'd3';
6 |
7 | const timeFormat = {
8 | dateTime: '%A %e %B %Y %H:%M:%S',
9 | date: '%d.%m.%Y',
10 | time: '%H:%M:%S',
11 | periods: ['AM', 'PM'],
12 | days: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
13 | shortDays: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
14 | months: [
15 | 'Januar',
16 | 'Februar',
17 | 'Mars',
18 | 'April',
19 | 'Mai',
20 | 'Juni',
21 | 'Juli',
22 | 'August',
23 | 'September',
24 | 'Oktober',
25 | 'November',
26 | 'Desember',
27 | ],
28 | shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des'],
29 | };
30 |
31 | const norwegianLocale = formatLocale({
32 | decimal: ',',
33 | thousands: ' ',
34 | grouping: [3],
35 | currency: ['', ' kr'],
36 | percent: '%',
37 | });
38 |
39 | const tableLocale = formatLocale({
40 | decimal: ',',
41 | thousands: ' ',
42 | grouping: [3],
43 | currency: ['', ' kr'],
44 | percent: ' ',
45 | });
46 |
47 | export { timeFormat, norwegianLocale, tableLocale };
48 |
--------------------------------------------------------------------------------
/src/components/__tests__/navigationDrawer.spec.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils';
2 | import VueSkipTo from '@vue-a11y/skip-to';
3 | import router from '@/router';
4 | import store from '@/store';
5 | import i18n from '@/i18n';
6 | import TheNavigationDrawer from '../TheNavigationDrawer.vue';
7 |
8 | global.scroll = jest.fn();
9 | window.scroll = jest.fn();
10 |
11 | describe('TheNavigationDrawer', () => {
12 | let wrapper = null;
13 |
14 | beforeEach(() => {
15 | wrapper = mount(TheNavigationDrawer, {
16 | global: {
17 | plugins: [router, store, i18n, VueSkipTo],
18 | stubs: {
19 | 'oslo-logo': true,
20 | },
21 | },
22 | });
23 | });
24 |
25 | afterEach(() => {
26 | wrapper.unmount();
27 | });
28 |
29 | test('renders TheNavigationDrawer-component and finds navbar-id', () => {
30 | expect(wrapper.classes('navbar')).toBe(true);
31 | });
32 |
33 | test('renders TheNavigationDrawer correctly', () => {
34 | expect(wrapper.element).toMatchSnapshot();
35 | });
36 |
37 | test('render TheNavigationDrawer with route /bydel/sagene correctly', async () => {
38 | await router.push('/bydel/sagene');
39 | expect(wrapper.element).toMatchSnapshot();
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/src/util/positionLabels.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @param {array} data - data array from template
3 | * @param {number} height - Minimum height between each element
4 | * @returns {array} - Data array with newly created 'start' and 'end'
5 | * attributes for each of the elements of the array
6 | * @description Calculates the ideal non-colliding y-position of labels
7 | * based on their initial positions.
8 | */
9 |
10 | function avoidCollisions(data, height) {
11 | const spacing = 15;
12 | const walk = 2;
13 |
14 | data = data
15 | .map((d) => {
16 | d.start = d.y;
17 | d.end = d.y + spacing;
18 | return d;
19 | })
20 | .sort((a, b) => a.start - b.start);
21 |
22 | let collision = true;
23 | while (collision) {
24 | collision = false;
25 | for (let i = 0; i < data.length - 1; i += 1) {
26 | if (data[i].end > data[i + 1].start) {
27 | if (data[i].start > 0) {
28 | data[i].start -= walk;
29 | data[i].end -= walk;
30 | }
31 | if (data[i + 1].end < height) {
32 | data[i + 1].start += walk;
33 | data[i + 1].end += walk;
34 | }
35 | collision = true;
36 | }
37 | }
38 | }
39 | return data;
40 | }
41 |
42 | export default avoidCollisions;
43 |
--------------------------------------------------------------------------------
/src/util/graph-templates/graph-helpers/generateTableData.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-nested-ternary */
2 | // TODO: refactor this function to be more flexible and reusable for all templates
3 |
4 | export default function generateTableData() {
5 | const isMultiLevel = this.data.meta.series[1] !== undefined;
6 | let tableHead;
7 | if (isMultiLevel) {
8 | tableHead = [
9 | ['Geografi', this.method === 'value' ? 'Antall' : this.showPermille ? 'Promilleandel' : 'Prosentandel'],
10 | [
11 | ...this.data.meta.series.map((d) => {
12 | let str = '';
13 | if (typeof d === 'string') {
14 | str += d;
15 | } else if (d.heading) {
16 | str += `${d.heading} ${d.subheading}`;
17 | }
18 | return str;
19 | }),
20 | ],
21 | ];
22 | } else {
23 | tableHead = ['Geografi', this.method === 'value' ? 'Antall' : this.showPermille ? 'Promilleandel' : 'Prosentandel'];
24 | }
25 | const tableBody = JSON.parse(JSON.stringify(this.data.data))
26 | .sort(this.tableSort)
27 | .map((row) => {
28 | return {
29 | key: row.geography,
30 | values: row.values.map((d) => d[this.method]),
31 | };
32 | });
33 |
34 | return [tableHead, tableBody];
35 | }
36 |
--------------------------------------------------------------------------------
/src/views/__tests__/district.spec.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils';
2 | import { createStore } from 'vuex';
3 | import { createRouter, createWebHistory } from 'vue-router';
4 | import i18n from '@/i18n';
5 | import { routes } from '@/router';
6 | import mockStore from '@/../tests/MockStore';
7 | import District from '../District.vue';
8 |
9 | describe('Bydel', () => {
10 | let wrapper = null;
11 | let router = null;
12 | let store = null;
13 |
14 | beforeEach(() => {
15 | store = createStore(mockStore);
16 | router = createRouter({
17 | history: createWebHistory(),
18 | routes,
19 | });
20 |
21 | wrapper = mount(District, {
22 | global: {
23 | plugins: [router, store, i18n],
24 | stubs: {
25 | VLeaflet: true,
26 | UxSignals: true,
27 | },
28 | },
29 | props: {
30 | district: 'gamleoslo',
31 | },
32 | });
33 | });
34 |
35 | afterEach(() => {
36 | wrapper.unmount();
37 | });
38 |
39 | test('renders bydel-component and finds main-container class', () => {
40 | expect(wrapper.classes('main-container')).toBe(true);
41 | });
42 |
43 | test('renders component correctly', () => {
44 | expect(wrapper.element).toMatchSnapshot();
45 | });
46 | });
47 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import { VueHeadMixin, createHead } from '@unhead/vue';
3 | import VueGtag from 'vue-gtag';
4 | import Vue3Resize from 'vue3-resize';
5 | import VueSkipTo from '@vue-a11y/skip-to';
6 | import '@vue-a11y/skip-to/dist/style.css';
7 | import './util/polyfills';
8 | import App from './App.vue';
9 | import router from './router';
10 | import store from './store';
11 | import i18n from './i18n';
12 | import clickOutside from './directives/clickOutside';
13 |
14 | import 'vue3-resize/dist/vue3-resize.css';
15 | import 'leaflet/dist/leaflet.css';
16 |
17 | import './styles/main.scss';
18 |
19 | const production = import.meta.env.PROD;
20 | const envs = production ? JSON.parse(window.__GLOBAL_ENVS__) : {};
21 |
22 | const app = createApp(App);
23 |
24 | const head = createHead();
25 | app.mixin(VueHeadMixin);
26 | app.use(head);
27 |
28 | app.use(store);
29 | app.use(router);
30 | app.use(i18n);
31 |
32 | app.use(Vue3Resize);
33 | app.use(VueSkipTo);
34 |
35 | // Directive to detect clicks outside of an element
36 | app.directive('click-outside', clickOutside);
37 |
38 | app.use(VueGtag, {
39 | config: {
40 | id: production ? envs.VITE_GOOGLE_ANALYTICS_ID : import.meta.env.VITE_GOOGLE_ANALYTICS_ID,
41 | },
42 | router,
43 | });
44 |
45 | app.mount('#app');
46 |
--------------------------------------------------------------------------------
/src/util/graph-templates/graph-helpers/closeButton/init.js:
--------------------------------------------------------------------------------
1 | import d3 from '@/assets/d3';
2 | import { color } from '../../colors';
3 |
4 | export default function init() {
5 | const { duration } = this;
6 |
7 | const g = this.canvas
8 | .append('g')
9 | .attr('class', 'close')
10 | .style('display', 'none')
11 | .on('click keyup', (e) => {
12 | if (e && e.type === 'keyup' && e.key !== 'Enter') return;
13 | this.render(this.data, { method: this.method });
14 | });
15 |
16 | // Close button background
17 | g.append('rect')
18 | .attr('width', 30)
19 | .attr('height', 30)
20 | .attr('fill', color.red)
21 | .style('cursor', 'pointer')
22 | .attr('opacity', 0.7)
23 | .on('mouseenter', function () {
24 | d3.select(this).transition().duration(duration).attr('opacity', 1);
25 | })
26 | .on('mouseleave', function () {
27 | d3.select(this).transition().duration(duration).attr('opacity', 0.7);
28 | });
29 |
30 | // Close button icon
31 | g.append('text')
32 | .attr('fill', color.purple)
33 | .style('pointer-events', 'none')
34 | .text('x')
35 | .attr('font-weight', 700)
36 | .attr('font-size', 20)
37 | .attr('text-anchor', 'middle')
38 | .attr('transform', 'translate(15, 20)');
39 |
40 | return g;
41 | }
42 |
--------------------------------------------------------------------------------
/src/util/graph-templates/graph-helpers/columnHelpers/updateColArrow.js:
--------------------------------------------------------------------------------
1 | export default function (selection) {
2 | selection
3 | .select('rect.arrow')
4 | .attr('transform', `translate(0, ${this.rowHeight / 2 - 5})`)
5 | .transition()
6 | .duration(this.duration)
7 | .attr('y', () => this.filteredData.data.findIndex((d) => d.totalRow) * this.rowHeight)
8 | .attr('x', (d, i) => {
9 | let val;
10 | const totalRow = this.filteredData.data.find((dj) => dj.totalRow);
11 |
12 | if (totalRow && totalRow.values && totalRow.values[i]) {
13 | val = totalRow.values[i][this.method];
14 | } else {
15 | return null;
16 | }
17 |
18 | if (this.method === 'value' && val > this.x[i].domain()[1]) return 0;
19 | return this.x[0](val);
20 | })
21 | .attr('opacity', (d, i) => {
22 | let val;
23 | const totalRow = this.filteredData.data.find((dj) => dj.totalRow);
24 |
25 | if (totalRow && totalRow.values && totalRow.values[i]) {
26 | val = totalRow.values[i][this.method];
27 | } else {
28 | return 0;
29 | }
30 |
31 | if (this.isMobileView) {
32 | return 0;
33 | }
34 | if (this.method === 'value' && val > this.x[i].domain()[1]) {
35 | return 0;
36 | }
37 | return 1;
38 | });
39 | }
40 |
--------------------------------------------------------------------------------
/src/util/downloadSvg.js:
--------------------------------------------------------------------------------
1 | import { select } from 'd3';
2 | import downloadFile from './downloadFile';
3 |
4 | // Generates the svg blob and calls download function
5 | export default function (svgData, filename) {
6 | svgData = cleanSvgData(svgData);
7 |
8 | const preface = '\r\n';
9 | const svgBlob = new Blob([preface, svgData], { type: 'image/svg+xml;charset=utf-8' });
10 |
11 | downloadFile(svgBlob, filename, '.svg');
12 | }
13 |
14 | // Parses the svgData str and strips away
15 | // mouse interactions using d3 and returns
16 | // a cleaned up svgData string.
17 | function cleanSvgData(str) {
18 | const parser = new DOMParser();
19 | const doc = parser.parseFromString(str, 'image/svg+xml');
20 | const svg = select(doc).select('svg');
21 |
22 | svg.selectAll('*').attr('tabindex', null).style('cursor', null);
23 |
24 | svg.select('.close').remove();
25 |
26 | // Remove hyperlinks by grabbing their children
27 | // and appending them to their grandparent before
28 | // removing the -elements.
29 | const hyperlinkChildren = svg.selectAll('a > *');
30 | hyperlinkChildren.each(function () {
31 | const parent = select(this).node().parentElement.parentElement;
32 | parent.append(select(this).node());
33 | });
34 | svg.selectAll('a').remove();
35 |
36 | return svg.node().outerHTML;
37 | }
38 |
--------------------------------------------------------------------------------
/.github/workflows/pull_request.yml:
--------------------------------------------------------------------------------
1 | name: Test pull request
2 |
3 | on:
4 | pull_request
5 |
6 | jobs:
7 | test-PR:
8 |
9 | runs-on: ubuntu-latest
10 |
11 | strategy:
12 | matrix:
13 | node-version: [20.x]
14 |
15 | steps:
16 | - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
17 |
18 | - name: Cache
19 | uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf # v4.2.2
20 | with:
21 | path: |
22 | ~/cache
23 | !~/cache/exclude
24 | **/node_modules
25 | ~/.cache
26 | key: ${{ runner.os }}-${{ hashFiles('package-lock.json') }}
27 | restore-keys: |
28 | ${{ runner.os }}-${{ hashFiles('package-lock.json') }}
29 |
30 | - name: Use Node.js ${{ matrix.node-version }}
31 | uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
32 | with:
33 | node-version: ${{ matrix.node-version }}
34 | - name: npm install, test, and build
35 | run: |
36 | npm install
37 | npm install --prefix server
38 | env:
39 | CI: true
40 | - name: npm lint
41 | run: |
42 | npm run lint
43 | npm run lint:style
44 | env:
45 | CI: true
46 | - name: npm test
47 | run: |
48 | npm run test:unit
49 | env:
50 | CI: true
51 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Bydelsfakta
2 |
3 | 👉 **https://bydelsfakta.oslo.kommune.no/**
4 |
5 | Bydelsfakta is a frontend application for Oslo municipality which visualises demographic statistics and data on various topics for the 15 districts in the City of Oslo.
6 |
7 | #### Install dependencies
8 | Install dependencies in both the root folder and the server folder for the backend
9 | ```
10 | npm install
11 | cd server && npm install
12 | ```
13 |
14 | #### Run it locally for local development
15 | In order to run this application, two different services is needed: one for frontend and one for backend
16 |
17 | ##### Frontend
18 | ```
19 | npm run serve
20 | ```
21 |
22 | ##### Backend
23 | Need to build the frontend once before running the backend
24 | ```
25 | npm run backend
26 | ```
27 |
28 | The backend needs some local variables, these are mostly secret, so if you need them then send us a DM and we could give you access.
29 |
30 | #### Build the project
31 | ```
32 | npm run build
33 | ```
34 |
35 | #### Run jest tests
36 | ```
37 | npm run test:unit:watch
38 | ```
39 |
40 | #### Lints and fixes files
41 | ```
42 | npm run lint
43 | ```
44 |
45 | #### Stylelint
46 | ```
47 | npm run lint:style:fix
48 | ```
49 |
50 | #### Github Actions
51 |
52 | We now use github actions to build the bydelsfakta-frontend, so you can check out when the last successfull build was built in the actions-tab.
53 |
--------------------------------------------------------------------------------
/src/util/graph-templates/graph-helpers/boxplotHelpers/createRowElements.js:
--------------------------------------------------------------------------------
1 | import { color } from '@/util/graph-templates/colors';
2 | import { initRowBox } from './rowBox';
3 | import { initRowGeography } from './rowGeography';
4 | import { initRowMedianText } from './rowMedianText';
5 | import { initMeanText } from './rowMeanText';
6 | import { initMeanRect } from './rowMeanRect';
7 | import { initRowMedianRect } from './rowMedianRect';
8 | import { initRowFill } from './rowFill';
9 |
10 | export default function (enter) {
11 | const g = enter
12 | .append('g')
13 | .classed('row', true)
14 | .attr('transform', (d, i) => `translate(0, ${i * this.rowHeight})`);
15 |
16 | g.append('rect').call(initRowFill.bind(this));
17 | g.append('rect').call(initRowDivider.bind(this));
18 | g.append('text').call(initRowGeography.bind(this));
19 | g.append('rect').call(initRowBox.bind(this));
20 | g.append('text').call(initRowMedianText.bind(this));
21 | g.append('rect').call(initRowMedianRect.bind(this));
22 | g.append('text').call(initMeanText.bind(this));
23 | g.append('rect').call(initMeanRect.bind(this));
24 |
25 | return g;
26 | }
27 |
28 | function initRowDivider(selection) {
29 | selection
30 | .attr('class', 'divider')
31 | .attr('fill', color.purple)
32 | .attr('x', -this.padding.left)
33 | .attr('height', 1)
34 | .attr('y', this.rowHeight);
35 | }
36 |
--------------------------------------------------------------------------------
/src/__tests__/app.spec.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils';
2 | import { createStore } from 'vuex';
3 | import { createRouter, createWebHistory } from 'vue-router';
4 | import Vue3Resize from 'vue3-resize';
5 | import VueSkipTo from '@vue-a11y/skip-to';
6 | import App from '@/App.vue';
7 | import clickOutside from '@/directives/clickOutside';
8 | import i18n from '@/i18n';
9 | import mockStore from '@/../tests/MockStore';
10 | import { routes } from '@/router';
11 |
12 | global.scroll = jest.fn();
13 | window.scroll = jest.fn();
14 |
15 | describe('App', () => {
16 | let wrapper = null;
17 | let store = null;
18 | let router = null;
19 |
20 | beforeEach(() => {
21 | store = createStore(mockStore);
22 | router = createRouter({
23 | history: createWebHistory(),
24 | routes,
25 | });
26 |
27 | wrapper = mount(App, {
28 | global: {
29 | plugins: [router, store, i18n, Vue3Resize, VueSkipTo],
30 | directives: {
31 | 'click-outside': clickOutside,
32 | },
33 | },
34 | shallow: true,
35 | });
36 | });
37 |
38 | afterEach(() => {
39 | wrapper.unmount();
40 | });
41 |
42 | test('renders app-component and finds id #app', () => {
43 | expect(wrapper.classes('app')).toBe(true);
44 | });
45 |
46 | test('shallowmounts app', () => {
47 | expect(wrapper.element).toMatchSnapshot();
48 | });
49 | });
50 |
--------------------------------------------------------------------------------
/src/assets/d3/index.js:
--------------------------------------------------------------------------------
1 | // tried to tree-shake but we would only save about 100-120kb, not worth it.
2 | /* import {
3 | line,
4 | brushX,
5 | move,
6 | extent,
7 | on,
8 | timeFormat,
9 | timeParse,
10 | timeYear,
11 | max,
12 | min,
13 | sum,
14 | format,
15 | select,
16 | selectAll,
17 | event,
18 | selection,
19 | scaleLinear,
20 | scaleTime,
21 | scaleBand,
22 | scaleOrdinal,
23 | axisTop,
24 | axisBottom,
25 | axisLeft,
26 | timeFormatDefaultLocale,
27 | scaleThreshold,
28 | color,
29 | interpolateRainbow,
30 | voronoi,
31 | area,
32 | axisRight,
33 | quantile,
34 | curveBasis,
35 | curveStep,
36 | mean,
37 | mouse,
38 | Page
39 | } from 'd3'; */
40 | /*
41 |
42 | export default {
43 | mouse,
44 | curveBasis,
45 | curveStep,
46 | mean,
47 | axisRight,
48 | quantile,
49 | area,
50 | voronoi,
51 | timeYear,
52 | interpolateRainbow,
53 | color,
54 | scaleThreshold,
55 | timeFormatDefaultLocale,
56 | select,
57 | selectAll,
58 | event,
59 | selection,
60 | scaleLinear,
61 | scaleTime,
62 | scaleBand,
63 | scaleOrdinal,
64 | axisTop,
65 | axisBottom,
66 | axisLeft,
67 | format,
68 | max,
69 | min,
70 | sum,
71 | timeFormat,
72 | timeParse,
73 | line,
74 | brushX,
75 | move,
76 | extent,
77 | on,
78 | };
79 | */
80 |
81 | import * as d3 from 'd3';
82 |
83 | export default d3;
84 |
--------------------------------------------------------------------------------
/src/util/graph-templates/graph-helpers/boxplotHelpers/createBoxPlotLegend.js:
--------------------------------------------------------------------------------
1 | import { boxHeight, boxWidth, textLabels } from './_legendConfig';
2 |
3 | export default function (selection) {
4 | selection.call(createBox).call(createMedianLine).call(createTextLabels);
5 | }
6 |
7 | const createBox = (selection) => {
8 | selection
9 | .attr('opacity', 0.5)
10 | .append('rect')
11 | .classed('box', true)
12 | .attr('fill', 'none')
13 | .attr('stroke', 'black')
14 | .attr('height', boxHeight)
15 | .attr('width', boxWidth)
16 | .attr('rx', 3);
17 |
18 | return selection;
19 | };
20 |
21 | const createMedianLine = (selection) => {
22 | selection
23 | .append('rect')
24 | .classed('median', true)
25 | .attr('height', boxHeight + 8)
26 | .attr('y', -4)
27 | .attr('x', boxWidth / 2 - 16)
28 | .attr('fill', 'black')
29 | .attr('width', 3);
30 | };
31 |
32 | const createTextLabels = (selection) => {
33 | selection
34 | .append('text')
35 | .text(textLabels[0])
36 | .attr('text-anchor', 'end')
37 | .attr('x', -10)
38 | .attr('y', boxHeight - 5);
39 |
40 | selection
41 | .append('text')
42 | .text(textLabels[1])
43 | .attr('x', boxWidth / 2 - 10)
44 | .attr('y', boxHeight - 5);
45 |
46 | selection
47 | .append('text')
48 | .text(textLabels[2])
49 | .attr('x', boxWidth + 10)
50 | .attr('y', boxHeight - 5);
51 | };
52 |
--------------------------------------------------------------------------------
/src/util/graph-templates/graph-helpers/columnHelpers/updateClickTrigger.js:
--------------------------------------------------------------------------------
1 | export default function (selection) {
2 | selection
3 | .select('rect.clickTrigger')
4 | .style('cursor', () => (this.data.meta.series.length > 1 ? 'pointer' : 'default'))
5 | .attr('width', (d, i) => {
6 | if (this.data.meta.series.length === 1) return 0;
7 | return this.x[i].range()[1] - this.x[i].range()[0] + this.gutter;
8 | })
9 | .attr('height', this.padding.top)
10 | .attr('transform', `translate(0, -60)`)
11 | .attr('fill', 'black')
12 | .attr('opacity', 0)
13 | .on('mouseover', ({ currentTarget }) => {
14 | const i = selection.nodes().indexOf(currentTarget.parentNode);
15 | this.render(this.data, { highlight: i, selected: this.selected, method: this.method });
16 | })
17 | .on('mouseleave', () => {
18 | this.render(this.data, { highlight: -1, selected: this.selected, method: this.method });
19 | })
20 | .on('click keyup', (e) => {
21 | if (e && e.type === 'keyup' && e.key !== 'Enter') return;
22 | if (this.data.meta.series.length === 1) return;
23 | const i = selection.nodes().indexOf(e.currentTarget.parentNode);
24 | const target = this.selected > -1 ? -1 : i;
25 |
26 | this.render(this.data, { selected: target, method: this.method });
27 | })
28 | .attr('tabindex', this.filteredData.meta.series.length > 1 ? 0 : false)
29 | .append('title')
30 | .html((d) => `${d.heading} ${d.subheading}`);
31 | }
32 |
--------------------------------------------------------------------------------
/src/util/graph-templates/graph-helpers/rowHelpers/styleRows.js:
--------------------------------------------------------------------------------
1 | import { color } from '@/util/graph-templates/colors';
2 | import styleRowName from './styleRowName';
3 | import styleValueText from './styleValueText';
4 |
5 | export default function (selection) {
6 | // Dynamic styling, sizing and positioning based on data and container size
7 | selection
8 | .select('rect.rowFill')
9 | .attr('fill-opacity', (d) => (d.avgRow || d.totalRow ? 0 : 0))
10 | .attr('width', this.padding.left + this.width + this.padding.right);
11 |
12 | selection
13 | .select('rect.divider')
14 | .attr('fill-opacity', (d) => {
15 | if (this.data.meta.series.length === 1) return 0;
16 | if (this.isMobileView) return 0;
17 | if (d.avgRow || d.totalRow) return 0.5;
18 | return 0.2;
19 | })
20 | .attr('width', this.padding.left + this.width + this.padding.right);
21 |
22 | selection
23 | .selectAll('text.valueText')
24 | .data((d) => d.values)
25 | .join('text')
26 | .call(styleValueText.bind(this));
27 |
28 | selection
29 | .select('text.geography')
30 | .call(styleRowName.bind(this))
31 | .attr('font-weight', (d) => (d.avgRow || d.totalRow ? 700 : 400))
32 | .append('title')
33 | .html((d) => d.geography);
34 |
35 | // Add attributes to total and avg rows
36 | selection.attr('fill', (d) => {
37 | if (d.avgRow) return color.yellow;
38 | if (d.totalRow) return color.purple;
39 | return color.purple;
40 | });
41 | }
42 |
--------------------------------------------------------------------------------
/src/config/allDistricts.js:
--------------------------------------------------------------------------------
1 | const allDistricts = [
2 | {
3 | key: '01',
4 | value: 'Bydel Gamle Oslo',
5 | uri: 'gamleoslo',
6 | },
7 | {
8 | key: '02',
9 | value: 'Bydel Grünerløkka',
10 | uri: 'grunerlokka',
11 | },
12 | {
13 | key: '03',
14 | value: 'Bydel Sagene',
15 | uri: 'sagene',
16 | },
17 | {
18 | key: '04',
19 | value: 'Bydel St. Hanshaugen',
20 | uri: 'sthanshaugen',
21 | },
22 | {
23 | key: '05',
24 | value: 'Bydel Frogner',
25 | uri: 'frogner',
26 | },
27 | {
28 | key: '06',
29 | value: 'Bydel Ullern',
30 | uri: 'ullern',
31 | },
32 | {
33 | key: '07',
34 | value: 'Bydel Vestre Aker',
35 | uri: 'vestreaker',
36 | },
37 | {
38 | key: '08',
39 | value: 'Bydel Nordre Aker',
40 | uri: 'nordreaker',
41 | },
42 | {
43 | key: '09',
44 | value: 'Bydel Bjerke',
45 | uri: 'bjerke',
46 | },
47 | {
48 | key: '10',
49 | value: 'Bydel Grorud',
50 | uri: 'grorud',
51 | },
52 | {
53 | key: '11',
54 | value: 'Bydel Stovner',
55 | uri: 'stovner',
56 | },
57 | {
58 | key: '12',
59 | value: 'Bydel Alna',
60 | uri: 'alna',
61 | },
62 | {
63 | key: '13',
64 | value: 'Bydel Østensjø',
65 | uri: 'ostensjo',
66 | },
67 | {
68 | key: '14',
69 | value: 'Bydel Nordstrand',
70 | uri: 'nordstrand',
71 | },
72 | {
73 | key: '15',
74 | value: 'Bydel Søndre Nordstrand',
75 | uri: 'sondrenordstrand',
76 | },
77 | ];
78 |
79 | export default allDistricts;
80 |
--------------------------------------------------------------------------------
/src/components/OkIcon.vue:
--------------------------------------------------------------------------------
1 |
2 |
32 |
35 |
38 |
39 |
40 |
41 |
42 |
43 |
47 |
53 |
54 |
55 |
3 |
24 |
25 |
26 |
70 |
71 |
76 |
--------------------------------------------------------------------------------
/server/routes.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | const https = require('https');
4 | const http = require('http');
5 | const express = require('express');
6 | const path = require('path');
7 | const auth = require('./auth');
8 |
9 | const api = process.env.BYDELSFAKTA_API_URL;
10 | const API_URL = api.slice(-1) === '/' ? api : `${api}/`;
11 | const get = API_URL[4] === 's' ? https.get : http.get;
12 |
13 | module.exports = (app) => {
14 | app.use('/', express.static(path.join(__dirname, '../docs/')));
15 |
16 | app.get('/health', (req, res) => {
17 | res.send('UP');
18 | });
19 |
20 | app.get('/.well-known/security.txt', (req, res) => {
21 | res.redirect('https://www.oslo.kommune.no/.well-known/security.txt');
22 | });
23 |
24 | app.get('/api/dataset/:dataset', auth(), (req, res) => {
25 | const headers = {};
26 | // eslint-disable-next-line no-restricted-syntax
27 | for (const k in req.headers) {
28 | if (['host', 'connection', 'content-length'].indexOf(k) === -1) {
29 | headers[k] = req.headers[k];
30 | }
31 | }
32 |
33 | get(
34 | `${API_URL}${req.params.dataset}?geography=${req.query.geography}`,
35 | {
36 | headers,
37 | },
38 | (proxyRes) => {
39 | const { statusCode } = proxyRes;
40 | const newHeaders = proxyRes.headers;
41 | const contentType = newHeaders['content-type'];
42 |
43 | if (statusCode !== 200) {
44 | console.error('Unexpected status:', statusCode);
45 | }
46 | if (!/^application\/json/.test(contentType)) {
47 | console.error('Unexpected content-type:', contentType);
48 | }
49 |
50 | res.writeHead(statusCode, newHeaders);
51 | proxyRes.pipe(res);
52 | }
53 | );
54 | });
55 |
56 | app.use('*', express.static(path.join(__dirname, '../docs/')));
57 |
58 | const allConfiguredRoutes = () => {
59 | const routes = [];
60 | app._router.stack.forEach((layer) => {
61 | if (layer && layer.route) {
62 | routes.push(layer.route.path);
63 | }
64 | });
65 | return { routes };
66 | };
67 |
68 | console.log(allConfiguredRoutes());
69 | };
70 |
--------------------------------------------------------------------------------
/server/auth/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 | const { request } = require('./api');
3 | const { shouldRefreshToken, addExpirationInformation } = require('./accessToken');
4 |
5 | const data = {
6 | client_id: process.env.KEYCLOAK_CLIENT_ID,
7 | client_secret: process.env.KEYCLOAK_CLIENT_SECRET,
8 | };
9 |
10 | let accessToken = null;
11 |
12 | const logErrors = (error, refresh) => {
13 | if (refresh) {
14 | console.error('Status: ', error.status);
15 | console.error('StatusText: ', error.statusText);
16 | console.error('Error refreshing access token: ', error.data);
17 | } else {
18 | console.error('Status: ', error.status);
19 | console.error('StatusText: ', error.statusText);
20 | console.error('Error getting access token: ', error.data);
21 | }
22 | };
23 |
24 | module.exports = () => {
25 | return (req, res, next) => {
26 | if (accessToken === null || shouldRefreshToken(accessToken.refresh_expires_at)) {
27 | const params = { ...data, grant_type: process.env.KEYCLOAK_GRANT_TYPE_CLIENT };
28 |
29 | request(params)
30 | .then((response) => {
31 | accessToken = addExpirationInformation(response);
32 | req.headers.authorization = `Bearer ${accessToken.access_token}`;
33 | next();
34 | })
35 | .catch((error) => {
36 | logErrors(error);
37 | return res.status(error.status);
38 | });
39 | } else if (shouldRefreshToken(accessToken.expires_at)) {
40 | const params = {
41 | ...data,
42 | grant_type: process.env.KEYCLOAK_GRANT_TYPE_REFRESH,
43 | refresh_token: accessToken.refresh_token,
44 | };
45 |
46 | request(params)
47 | .then((response) => {
48 | accessToken = addExpirationInformation(response);
49 | req.headers.authorization = `Bearer ${accessToken.access_token}`;
50 | next();
51 | })
52 | .catch((error) => {
53 | logErrors(error, true);
54 | return res.status(error.status);
55 | });
56 | } else {
57 | req.headers.authorization = `Bearer ${accessToken.access_token}`;
58 | next();
59 | }
60 | };
61 | };
62 |
--------------------------------------------------------------------------------
/src/views/District.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
23 |
3 |
23 |
24 |
25 |
77 |
--------------------------------------------------------------------------------
/.stylelintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | extends: [
3 | /*
4 | The recommended shareable SCSS config for Stylelint. Extends both
5 | the `stylelint-config-recommended` shared config and configures its
6 | rules for SCSS. Bundles and configures the `stylelint-scss plugin`
7 | pack and the `postcss-scss` custom syntax.
8 | https://github.com/stylelint-scss/stylelint-config-standard-scss
9 | */
10 | 'stylelint-config-recommended-scss',
11 | /*
12 | Recommended shareable Vue config for Stylelint. Extends the
13 | `stylelint-config-recommended` shared config and bundles
14 | the `postcss-html` custom syntax and configures it.
15 | https://github.com/ota-meshi/stylelint-config-recommended-vue
16 | */
17 | 'stylelint-config-recommended-vue',
18 | /*
19 | Turns off all CSS and SCSS rules that are unnecessary or might
20 | conflict with Prettier.
21 | https://github.com/prettier/stylelint-config-prettier-scss
22 | */
23 | // 'stylelint-config-prettier-scss',
24 | /*
25 | Stylelint config for "rational" ordering of property declarations.
26 | https://github.com/Allohamora/stylelint-config-rational-order
27 | */
28 | 'stylelint-config-rational-order-fix',
29 | ],
30 | plugins: [
31 | /*
32 | Collection of SCSS specific linting rules for Stylelint.
33 | https://github.com/stylelint-scss/stylelint-scss
34 | */
35 | 'stylelint-scss',
36 | /*
37 | Plugin pack of order-related linting rules for Stylelint.
38 | https://github.com/hudochenkov/stylelint-order
39 | */
40 | 'stylelint-order',
41 | ],
42 | rules: {
43 | 'color-hex-length': 'long',
44 | 'color-function-notation': 'legacy',
45 | 'at-rule-no-unknown': null,
46 | 'scss/at-rule-no-unknown': true,
47 | 'no-descending-specificity': null,
48 | 'function-no-unknown': null,
49 | 'scss/no-global-function-names': null,
50 | 'selector-class-pattern': null,
51 | 'scss/at-function-pattern': null,
52 | 'scss/comment-no-empty': null,
53 | 'shorthand-property-no-redundant-values': null,
54 | 'length-zero-no-unit': null,
55 | 'alpha-value-notation': null,
56 | 'font-family-name-quotes': 'always-unless-keyword',
57 | 'font-family-no-missing-generic-family-keyword': true,
58 | },
59 | }
60 |
--------------------------------------------------------------------------------
/src/config/topics/befolkningsutvikling.js:
--------------------------------------------------------------------------------
1 | import { apiUrl, baseUrl } from '../../util/config';
2 | import source from './dataSources';
3 |
4 | const API = `${apiUrl}/api/dataset`;
5 |
6 | export default {
7 | text: 'Befolkningsutvikling',
8 | value: 'befolkningsutvikling',
9 | cards: [
10 | {
11 | size: 'large',
12 | heading: 'Befolkningsutvikling',
13 | about: {
14 | info: 'Statistikken viser folkemengden per 1.1. hvert år. For flere befolkningstabeller se under «Befolkning» i Oslo kommunes statistikkbank.',
15 | sources: [source.ssb],
16 | externalInfo: 'https://statistikkbanken.oslo.kommune.no/statbank/pxweb/no/db1/db1__Befolkning__Folkemengde',
17 | },
18 | tabs: [
19 | {
20 | label: 'Folkemengde',
21 | heading: 'Befolkningsutvikling',
22 | id: 'befolkningsutvikling_antall',
23 | method: 'value',
24 | template: 'lines',
25 | url: `${API}/folkemengde-utvikling-historisk`,
26 | },
27 |
28 | {
29 | heading: 'Prosentvis årlig utvikling i folkemengde',
30 | label: 'Prosentvis endring',
31 | id: 'befolkningsutvikling_andel',
32 | method: 'ratio',
33 | template: 'lines',
34 | url: `${API}/folkemengde-utvikling-historisk-prosent`,
35 | },
36 | ],
37 | },
38 | {
39 | size: 'large',
40 | heading: 'Befolkningsvekst',
41 | about: {
42 | info: 'Statistikken viser folkemengden per 1.1. hvert år. For flere befolkningstabeller se under «Befolkning» i Oslo kommunes statistikkbank.',
43 | sources: [source.ssb],
44 | externalInfo: 'https://statistikkbanken.oslo.kommune.no/statbank/pxweb/no/db1/db1__Befolkning__Folkemengde',
45 | },
46 | tabs: [
47 | {
48 | label: 'Status',
49 | heading: 'Befolkningsvekst',
50 | id: 'befolkningsvekst',
51 | url: `${API}/nokkeltall-om-befolkningen`,
52 | template: 'populationDetailsTable',
53 | },
54 | ],
55 | },
56 | ],
57 | related: ['alder', 'innvandrerbefolkningen', 'fodte-dode-flytting'],
58 | options: {
59 | kategori: 'Befolkning',
60 | tema: 'Befolkningsutvikling',
61 | bgImage: `${baseUrl}/img/folkemengde`,
62 | txtColor: 'rgb(245, 173, 165)',
63 | },
64 | };
65 |
--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
1 | import { createRouter, createWebHistory } from 'vue-router';
2 |
3 | import { topicNames, disabledTopics } from './config/topics';
4 | import allDistricts from './config/allDistricts';
5 |
6 | export const routes = [
7 | {
8 | path: '/',
9 | name: 'Home',
10 | component: () => import('@/views/District.vue'),
11 | },
12 | {
13 | path: '/bydel/:district?',
14 | name: 'District',
15 | component: () => import('@/views/District.vue'),
16 | props: true,
17 | },
18 | {
19 | path: '/bydel/:district/:topic',
20 | name: 'Topic',
21 | component: () => import('@/views/Topic.vue'),
22 | props: true,
23 | },
24 | {
25 | path: '/:pathMatch(.*)*',
26 | name: 'NotFound',
27 | component: () => import('@/views/NotFound.vue'),
28 | },
29 | ];
30 |
31 | const router = createRouter({
32 | history: createWebHistory(),
33 | routes,
34 | });
35 |
36 | // Temp while we find out what our homepage should look like
37 | router.beforeEach((to, from) => {
38 | if (to.params.topic) {
39 | if (
40 | (!topicNames.find((name) => name === to.params.topic) && import.meta.env.VITE_PRODUCTION_DATA === 'prod') ||
41 | disabledTopics.includes(to.params.topic)
42 | ) {
43 | return { name: 'NotFound', params: [to.path] };
44 | }
45 | }
46 | if (to.params.district) {
47 | const districts = to.params.district.split('-');
48 | if (districts[0] === 'alle') {
49 | return true;
50 | }
51 | if (districts.length === 1) {
52 | if (allDistricts.find((district) => district.uri === districts[0])) {
53 | return true;
54 | }
55 | if (allDistricts.find((district) => district.key === districts[0])) {
56 | return true;
57 | }
58 | return { name: 'NotFound', params: [to.path] };
59 | }
60 | if (districts.length > 1) {
61 | const errors = [];
62 | districts.forEach((district) => {
63 | if (!allDistricts.find((item) => item.key === district)) {
64 | errors.push(district);
65 | }
66 | });
67 | if (errors.length > 0) {
68 | return { name: 'NotFound', params: [to.path] };
69 | }
70 | }
71 | }
72 | if (to.params.topic !== from.params.topic || (to.name === 'Topic' && from.name === 'District')) {
73 | window.scroll(0, 0);
74 | }
75 | return true;
76 | });
77 |
78 | export default router;
79 |
--------------------------------------------------------------------------------
/src/components/UxSignals.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
23 |
24 |
108 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: {
4 | node: true,
5 | jest: true,
6 | },
7 | extends: [
8 | /*
9 | Provides Airbnb's base JS .eslintrc as an extensible shared config.
10 | https://github.com/airbnb/javascript
11 | */
12 | 'airbnb-base',
13 | /*
14 | Use the recommended rule preset for `eslint-plugin-vue`.
15 | https://eslint.vuejs.org/rules/
16 | */
17 | 'plugin:vue/vue3-recommended',
18 | /*
19 | Use as the last extension in order to override conflicting ESLint rules.
20 | https://github.com/prettier/eslint-plugin-prettier
21 | */
22 | 'plugin:prettier/recommended',
23 | ],
24 | plugins: [
25 | /*
26 | Official ESLint plugin for Vue.js. Allows us to check the `` and
27 | `
53 |
54 |
114 |
--------------------------------------------------------------------------------
/src/components/VCategory.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
22 |
7 |
18 |
19 |
21 |
3 |
45 |
46 |
47 |
68 |
69 |
149 |
--------------------------------------------------------------------------------
/src/config/geoData/st_hanshaugen.js:
--------------------------------------------------------------------------------
1 | export default {"type": "FeatureCollection", "name": "Bydel St.Hanshaugen", "id": 4, "features": [{"type": "Feature", "properties": {"name": "Hammersborg", "id": "0301040401", "bydel": 4}, "geometry": {"type": "MultiPolygon", "coordinates": [[[[10.741214, 59.922247, 0.0], [10.7421, 59.921057, 0.0], [10.743502, 59.919789, 0.0], [10.743698, 59.91925, 0.0], [10.744859, 59.919652, 0.0], [10.74604, 59.919734, 0.0], [10.746556, 59.920851, 0.0], [10.746833, 59.92087, 0.0], [10.747341, 59.920264, 0.0], [10.748221, 59.920343, 0.0], [10.749102, 59.92069, 0.0], [10.750353, 59.92169, 0.0], [10.750699, 59.921696, 0.0], [10.751138, 59.921226, 0.0], [10.747989, 59.919635, 0.0], [10.751696, 59.919187, 0.0], [10.757004, 59.916075, 0.0], [10.754527, 59.914958, 0.0], [10.749913, 59.913495, 0.0], [10.747776, 59.912868, 0.0], [10.745928, 59.912818, 0.0], [10.741544, 59.914462, 0.0], [10.74057, 59.916542, 0.0], [10.736875, 59.918653, 0.0], [10.735487, 59.920035, 0.0], [10.73374, 59.920661, 0.0], [10.73506, 59.921235, 0.0], [10.738085, 59.921361, 0.0], [10.741214, 59.922247, 0.0]]]]}}, {"type": "Feature", "properties": {"name": "Bislett", "id": "0301040402", "bydel": 4}, "geometry": {"type": "MultiPolygon", "coordinates": [[[[10.738085, 59.921361, 0.0], [10.73506, 59.921235, 0.0], [10.73374, 59.920661, 0.0], [10.732829, 59.920984, 0.0], [10.732096, 59.922034, 0.0], [10.731937, 59.922958, 0.0], [10.730863, 59.924971, 0.0], [10.73081, 59.925535, 0.0], [10.73458, 59.932399, 0.0], [10.735622, 59.9318, 0.0], [10.736384, 59.930083, 0.0], [10.738786, 59.928577, 0.0], [10.738985, 59.927485, 0.0], [10.738614, 59.926706, 0.0], [10.738519, 59.925665, 0.0], [10.738733, 59.925293, 0.0], [10.739764, 59.924832, 0.0], [10.740039, 59.923569, 0.0], [10.741157, 59.92237, 0.0], [10.738085, 59.921361, 0.0]]]]}}, {"type": "Feature", "properties": {"name": "Ila", "id": "0301040403", "bydel": 4}, "geometry": {"type": "MultiPolygon", "coordinates": [[[[10.749071, 59.932166, 0.0], [10.74892, 59.930683, 0.0], [10.74973, 59.928171, 0.0], [10.750149, 59.925394, 0.0], [10.750897, 59.923528, 0.0], [10.75092, 59.922911, 0.0], [10.750567, 59.922261, 0.0], [10.750699, 59.921696, 0.0], [10.750353, 59.92169, 0.0], [10.749102, 59.92069, 0.0], [10.748221, 59.920343, 0.0], [10.747341, 59.920264, 0.0], [10.746833, 59.92087, 0.0], [10.746556, 59.920851, 0.0], [10.74604, 59.919734, 0.0], [10.744859, 59.919652, 0.0], [10.743698, 59.91925, 0.0], [10.743502, 59.919789, 0.0], [10.7421, 59.921057, 0.0], [10.740039, 59.923569, 0.0], [10.739764, 59.924832, 0.0], [10.738733, 59.925293, 0.0], [10.738475, 59.925794, 0.0], [10.738683, 59.926908, 0.0], [10.738985, 59.927485, 0.0], [10.743589, 59.92994, 0.0], [10.743312, 59.930173, 0.0], [10.743727, 59.930584, 0.0], [10.74645, 59.931485, 0.0], [10.747827, 59.932255, 0.0], [10.748243, 59.93212, 0.0], [10.749303, 59.932749, 0.0], [10.749071, 59.932166, 0.0]]]]}}, {"type": "Feature", "properties": {"name": "Fagerborg", "id": "0301040404", "bydel": 4}, "geometry": {"type": "MultiPolygon", "coordinates": [[[[10.731508, 59.926872, 0.0], [10.730681, 59.925602, 0.0], [10.729285, 59.926637, 0.0], [10.728229, 59.927899, 0.0], [10.722891, 59.931734, 0.0], [10.729243, 59.93482, 0.0], [10.732877, 59.933437, 0.0], [10.73458, 59.932399, 0.0], [10.731508, 59.926872, 0.0]]]]}}, {"type": "Feature", "properties": {"name": "Lindern", "id": "0301040405", "bydel": 4}, "geometry": {"type": "MultiPolygon", "coordinates": [[[[10.743604, 59.941106, 0.0], [10.746619, 59.940264, 0.0], [10.746928, 59.941248, 0.0], [10.750073, 59.940812, 0.0], [10.750186, 59.940037, 0.0], [10.749554, 59.933207, 0.0], [10.749303, 59.932749, 0.0], [10.748243, 59.93212, 0.0], [10.747827, 59.932255, 0.0], [10.74645, 59.931485, 0.0], [10.743727, 59.930584, 0.0], [10.743312, 59.930173, 0.0], [10.743589, 59.92994, 0.0], [10.739149, 59.92752, 0.0], [10.738985, 59.927485, 0.0], [10.738786, 59.928577, 0.0], [10.736384, 59.930083, 0.0], [10.735497, 59.931898, 0.0], [10.732493, 59.933639, 0.0], [10.731349, 59.933892, 0.0], [10.729343, 59.934801, 0.0], [10.722891, 59.931734, 0.0], [10.715546, 59.935005, 0.0], [10.718942, 59.93687, 0.0], [10.719483, 59.936652, 0.0], [10.722817, 59.937122, 0.0], [10.724653, 59.936284, 0.0], [10.730133, 59.938181, 0.0], [10.730325, 59.93777, 0.0], [10.731186, 59.937924, 0.0], [10.731779, 59.938774, 0.0], [10.740697, 59.942985, 0.0], [10.741263, 59.942868, 0.0], [10.741994, 59.94221, 0.0], [10.743998, 59.941788, 0.0], [10.743432, 59.941157, 0.0], [10.743604, 59.941106, 0.0]]]]}}]}
--------------------------------------------------------------------------------
/src/config/topics/eierform.js:
--------------------------------------------------------------------------------
1 | import { baseUrl, apiUrl } from '../../util/config';
2 | import source from './dataSources';
3 |
4 | const API = `${apiUrl}/api/dataset`;
5 |
6 | export default {
7 | text: 'Eierform',
8 | value: 'eierform',
9 | cards: [
10 | {
11 | size: 'large',
12 | heading: 'Eierform',
13 | about: {
14 | info: 'Statistikken er basert på SSB sin husholdningsstatistikk per 1.1. Eierstatus viser husholdningens eierforhold til boligen. Som eiere av boliger regnes både selveiere og eiere gjennom borettslag eller boligaksjeselskap. Husholdningen eier boligen dersom minst en av personene i husholdningen står som eier av boligen. Når ingen av de bosatte står som eier, regnes husholdningen å ha et leieforhold til boligen.',
15 | sources: [source.ssb],
16 | externalInfo:
17 | 'https://statistikkbanken.oslo.kommune.no/statbank/pxweb/no/db1/db1__Husholdninger%20og%20boforhold/OK-BOF001.px',
18 | },
19 | map: {
20 | labels: ['Færre', 'Flere'],
21 | url: `${API}/eieform-status`,
22 | heading: 'Leietakere',
23 | method: 'ratio',
24 | },
25 | tabs: [
26 | {
27 | label: 'Andel',
28 | id: 'eieform_status_antall',
29 | heading: 'Husholdning etter eie-/leieforhold',
30 | template: 'bars',
31 | method: 'ratio',
32 | url: `${API}/eieform-status`,
33 | },
34 | {
35 | label: 'Matrise',
36 | id: 'eieform_status_andel',
37 | heading: 'Husholdning etter eie-/leieforhold',
38 | template: 'ternaryPlot',
39 | method: 'ratio',
40 | url: `${API}/eieform-status`,
41 | },
42 | {
43 | label: 'Historisk',
44 | id: 'eieform_historisk_andel',
45 | heading: 'Husholdning etter eie-/leieforhold',
46 | template: 'linesMulti',
47 | method: 'ratio',
48 | url: `${API}/eieform-historisk`,
49 | },
50 | ],
51 | },
52 | {
53 | size: 'large',
54 | heading: 'Kommunale boliger',
55 | about: {
56 | info: '
4 |
17 |
5 |
9 |
6 |
7 |
8 |
10 |
13 | {{ $t('notFound.siteNotFound.button') }}
14 |
15 |
16 | {{ $t('notFound.siteNotFound.header') }}
11 |{{ $t('notFound.siteNotFound.paragraph') }}
12 |
18 |
26 | {{ $t('notFound.feedback.header') }}
19 |20 | {{ $t('notFound.feedback.paragraph') }} 21 | bydelsfakta@byr.oslo.kommune.no 24 |
25 |
27 |
44 | {{ $t('notFound.seeMore.header') }}
28 |29 | {{ $t('notFound.seeMore.subheader') }} 30 |
31 |
32 |
43 | Tabellen omfatter kommunale boliger i Oslo per 1.1. Omsorg pluss boliger er med, men ikke presteboliger. Oslo kommune er selv eier av de fleste kommunale boliger.
I sameier, borettslag og aksjeselskap eier Oslo kommune en eller flere boliger, mens i kommunale eiendommer eier Oslo kommune både bygning og alle boligene.', 57 | sources: [source.ssb, source.oslo], 58 | externalInfo: 59 | 'https://statistikkbanken.oslo.kommune.no/statbank/pxweb/no/db1/db1__Boliger%20og%20byggevirksomhet__Kommunale%20boliger/', 60 | }, 61 | map: { 62 | labels: ['Færre', 'Flere'], 63 | url: `${API}/kommunale-boliger-av-boligmassen-i-alt-status`, 64 | method: 'ratio', 65 | heading: 'Kommunale boliger', 66 | reverse: true, 67 | }, 68 | tabs: [ 69 | { 70 | label: 'Andel', 71 | id: 'kommunelage_boliger_status_andel', 72 | heading: 'Kommunale boliger', 73 | template: 'bars', 74 | method: 'ratio', 75 | url: `${API}/kommunale-boliger-av-boligmassen-i-alt-status`, 76 | }, 77 | { 78 | label: 'Antall', 79 | id: 'kommunelage_boliger_status_antall', 80 | heading: 'Kommunale boliger', 81 | template: 'bars', 82 | method: 'value', 83 | url: `${API}/kommunale-boliger-av-boligmassen-i-alt-status`, 84 | }, 85 | { 86 | label: 'Historisk (andel)', 87 | id: 'kommunelage_boliger_historisk_andel', 88 | heading: 'Kommunale boliger', 89 | template: 'lines', 90 | method: 'ratio', 91 | url: `${API}/kommunale-boliger-av-boligmassen-i-alt-historisk`, 92 | }, 93 | { 94 | label: 'Historisk (antall)', 95 | id: 'kommunelage_boliger_historisk_antall', 96 | heading: 'Kommunale boliger', 97 | template: 'lines', 98 | method: 'value', 99 | url: `${API}/kommunale-boliger-av-boligmassen-i-alt-historisk`, 100 | }, 101 | ], 102 | }, 103 | ], 104 | options: { 105 | kategori: 'Boforhold', 106 | tema: 'Eierform', 107 | bgImage: `${baseUrl}/img/eieform`, 108 | txtColor: 'rgb(199, 247, 201)', 109 | }, 110 | related: ['boligpriser', 'rom-per-person', 'bygningstyper'], 111 | }; 112 | -------------------------------------------------------------------------------- /src/components/OsloLogo.vue: -------------------------------------------------------------------------------- 1 | 2 | 30 | 31 | 32 | 37 | --------------------------------------------------------------------------------