From 50badea9611d12a8461cf8c73629cfd4334cafee Mon Sep 17 00:00:00 2001
From: "Vink, S.A. (Sjoerd)" <s.a.vink@uu.nl>
Date: Thu, 8 Aug 2024 18:39:39 +0200
Subject: [PATCH] fix(mapvisStorybook): fixed map storybook
---
.../layers/nodelink-layer/NodeLinkLayer.tsx | 2 +-
.../visualizations/mapvis/mapvis.stories.tsx | 106 +++++++++++-------
2 files changed, 69 insertions(+), 39 deletions(-)
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 b9fddcfca..81f943b88 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 a590ae956..181bedef3 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: () => {},
},
};
--
GitLab