diff --git a/libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkLayer.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkLayer.tsx index b9fddcfca0c689c3420884e476e994f28b02def6..81f943b883c908aadc27263e22273821529e041d 100644 --- a/libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkLayer.tsx +++ b/libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkLayer.tsx @@ -43,7 +43,7 @@ export class NodeLinkLayer extends CompositeLayer<CompositeLayerType> { }); }); - if (ml.linkPrediction.enabled) { + if (ml?.linkPrediction?.enabled) { this._layers['link_prediction'] = new LineLayer({ id: 'link-prediction-layer', data: ml.linkPrediction.result, diff --git a/libs/shared/lib/vis/visualizations/mapvis/mapvis.stories.tsx b/libs/shared/lib/vis/visualizations/mapvis/mapvis.stories.tsx index a590ae956f3d990858c7682507bbc6b4ee56bbdf..181bedef3d70bd9ad12fa8009d3bd06abe430ee8 100644 --- a/libs/shared/lib/vis/visualizations/mapvis/mapvis.stories.tsx +++ b/libs/shared/lib/vis/visualizations/mapvis/mapvis.stories.tsx @@ -3,7 +3,7 @@ import { Meta } from '@storybook/react'; import { Provider } from 'react-redux'; import { configureStore } from '@reduxjs/toolkit'; import { graphQueryResultSlice, querybuilderSlice, schemaSlice, visualizationSlice } from '../../../data-access/store'; -import { MapComponent } from './mapvis'; +import MapComponent from './mapvis'; import { mockData } from '../../../mock-data/query-result/mockData'; const Mockstore = configureStore({ @@ -39,27 +39,32 @@ export const NodeLink = { ...(await mockData.mockMobilityQueryResult()), settings: { layer: 'nodelink', - parkings: { - color: [6, 147, 227], - fixed: true, - hidden: false, - lat: 'lat', - lon: 'long', - max: 10, - min: 0, - radius: 1, - sizeAttribute: '', - }, - rides: { - color: [6, 147, 227], - fixed: true, - hidden: false, - max: 10, - min: 0, - width: 1, - widthAttribute: '', + location: { parkings: { lat: 'lat', lon: 'long' } }, + nodelink: { + enableBrushing: false, + nodes: { + parkings: { + colorByAttribute: false, + colorAttribute: undefined, + colorAttributeType: undefined, + hidden: false, + shape: 'circle', + color: [6, 147, 227], + size: 10, + }, + }, + edges: { + rides: { + hidden: false, + width: 1, + sizeAttribute: '', + fixed: true, + color: [6, 147, 227], + }, + }, }, }, + handleSelect: () => {}, }, }; @@ -68,27 +73,52 @@ export const Heatmap = { ...(await mockData.mockMobilityQueryResult()), settings: { layer: 'heatmap', - parkings: { - color: [6, 147, 227], - fixed: true, - hidden: false, - lat: 'lat', - lon: 'long', - max: 10, - min: 0, - radius: 1, - sizeAttribute: '', + location: { parkings: { lat: 'lat', lon: 'long' } }, + heatmap: { + nodes: { + parkings: { + size: 10, + hidden: false, + }, + }, + edges: { + rides: {}, + }, }, - rides: { - color: [6, 147, 227], - fixed: true, - hidden: false, - max: 10, - min: 0, - width: 1, - widthAttribute: '', + }, + handleSelect: () => {}, + }, +}; + +export const Choropleth = { + args: { + ...(await mockData.mockMobilityQueryResult()), + settings: { + layer: 'choropleth', + location: { parkings: { lat: 'lat', lon: 'long' } }, + choropleth: { + coloringStrategy: 'Node count', + colorScale: 'orange', + opacity: 0.8, + nodes: { + parkings: { + color: [0, 0, 0], + hidden: false, + fixed: true, + min: 0, + max: 10, + sizeAttribute: '', + }, + }, + edges: { + rides: { + color: [0, 0, 0], + onHover: true, + }, + }, }, }, + handleSelect: () => {}, }, };