Skip to content

Commit

Permalink
feat: Naïve vector tile implementation
Browse files Browse the repository at this point in the history
tmp: Vector tiles experimentations

build: Fix ESLint ignoring type-only imports

PR: import-js/eslint-plugin-import#2220

feat: Naïve vector tile implementation
  • Loading branch information
wmai committed Aug 24, 2022
1 parent 20727d3 commit b9d1333
Show file tree
Hide file tree
Showing 13 changed files with 14,342 additions and 13,684 deletions.
533 changes: 518 additions & 15 deletions package-lock.json

Large diffs are not rendered by default.

130 changes: 100 additions & 30 deletions packages/visualizations-react/stories/Map/StudioChoropleth.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { Meta } from '@storybook/react';
import { Choropleth, Props } from '../../src';
import { ChoroplethOptions, DataFrame } from '@opendatasoft/visualizations';
import { ColorScaleTypes, DataFrame, ChoroplethOptions, ChoroplethTooltipFormatter } from '@opendatasoft/visualizations';
import { shapes, multiPolygonShapes } from './shapes';
import { IMAGES } from '../utils';

Expand All @@ -16,6 +16,8 @@ const df = [
{ x: 'Corsica', y: 95 },
];

const defaultLabelCallback: ChoroplethTooltipFormatter = ({ label, value }) => `<b>${label}:</b> ${value}`;

export default meta;
const Template = (args: Props<DataFrame, ChoroplethOptions>) => (
<div
Expand All @@ -42,9 +44,11 @@ const StudioChoroplethArgs: Props<DataFrame, ChoroplethOptions> = {
],
},
options: {
style: {},
parameters: {},
shapes,
shapes: shapes,
emptyValueColor: 'red',
tooltip: {
label: defaultLabelCallback,
},
aspectRatio: 1,
},
};
Expand All @@ -60,9 +64,11 @@ const StudioChoroplethMultiPolygonArgs: Props<DataFrame, ChoroplethOptions> = {
],
},
options: {
style: {},
parameters: {},
shapes: multiPolygonShapes,
emptyValueColor: 'red',
tooltip: {
label: defaultLabelCallback,
},
aspectRatio: 1,
},
};
Expand All @@ -78,10 +84,11 @@ const StudioChoroplethEmptyValueArgs: Props<DataFrame, ChoroplethOptions> = {
],
},
options: {
style: {},
parameters: {},
shapes,
emptyValueColor: '#f29d9d',
shapes: shapes,
emptyValueColor: 'red',
tooltip: {
label: defaultLabelCallback,
},
aspectRatio: 1,
},
};
Expand All @@ -98,11 +105,13 @@ const StudioChoroplethGradientArgs: Props<DataFrame, ChoroplethOptions> = {
],
},
options: {
style: {},
parameters: {},
shapes,
shapes: shapes,
emptyValueColor: 'red',
tooltip: {
label: defaultLabelCallback,
},
colorsScale: {
type: 'gradient',
type: ColorScaleTypes.Gradient,
colors: {
start: '#bcf5f9',
end: '#0229bf',
Expand All @@ -127,11 +136,13 @@ const StudioChoroplethPaletteArgs: Props<DataFrame, ChoroplethOptions> = {
],
},
options: {
style: {},
parameters: {},
shapes,
shapes: shapes,
emptyValueColor: 'red',
tooltip: {
label: defaultLabelCallback,
},
colorsScale: {
type: 'palette',
type: ColorScaleTypes.Palette,
colors: ['#bcf5f9', '#89c5fd', '#3a80ec', '#0229bf'],
},
aspectRatio: 1,
Expand All @@ -149,11 +160,10 @@ const StudioChoroplethCustomTooltipArgs: Props<DataFrame, ChoroplethOptions> = {
value: df,
},
options: {
style: {},
parameters: {},
shapes,
shapes: shapes,
emptyValueColor: 'red',
colorsScale: {
type: 'palette',
type: ColorScaleTypes.Palette,
colors: ['#bcf5f9', '#89c5fd', '#3a80ec', '#0229bf'],
},
aspectRatio: 1,
Expand All @@ -179,11 +189,10 @@ const StudioChoroplethComplexTooltipArgs: Props<DataFrame, ChoroplethOptions> =
value: df,
},
options: {
style: {},
parameters: {},
shapes,
shapes: shapes,
emptyValueColor: 'red',
colorsScale: {
type: 'palette',
type: ColorScaleTypes.Palette,
colors: ['#bcf5f9', '#89c5fd', '#3a80ec', '#0229bf'],
},
aspectRatio: 1,
Expand Down Expand Up @@ -216,11 +225,13 @@ const StudioChoroplethLongLabelsArgs: Props<DataFrame, ChoroplethOptions> = {
],
},
options: {
style: {},
parameters: {},
shapes,
shapes: shapes,
emptyValueColor: 'red',
tooltip: {
label: defaultLabelCallback,
},
colorsScale: {
type: 'palette',
type: ColorScaleTypes.Palette,
colors: ['#bcf5f9', '#89c5fd', '#3a80ec', '#1e03fd', '#0229bf'],
},
aspectRatio: 1,
Expand All @@ -230,3 +241,62 @@ const StudioChoroplethLongLabelsArgs: Props<DataFrame, ChoroplethOptions> = {
},
};
StudioChoroplethLongLabels.args = StudioChoroplethLongLabelsArgs;


export const StudioVectorTilesChoropleth = Template.bind({});
const StudioVectorTilesChoroplethArgs: Props<DataFrame, ChoroplethOptions> = {
data: {
loading: false,
value: [
{ x: '01', y: 10 },
{ x: '02', y: 2 },
{ x: '03', y: 30 },
{ x: '04', y: 4 },
{ x: '05', y: 50 },
{ x: '06', y: 6 },
{ x: '11', y: 100 },
{ x: '24', y: 8 },
{ x: '27', y: 90 },
{ x: '28', y: 10 },
{ x: '32', y: 110 },
{ x: '44', y: 12 },
{ x: '52', y: 130 },
{ x: '53', y: 14 },
{ x: '75', y: 150 },
{ x: '76', y: 16 },
{ x: '84', y: 170 },
{ x: '93', y: 18 },
{ x: '94', y: 190 },
{ x: '975', y: 20 },
{ x: '977', y: 210 },
{ x: '978', y: 22 },
{ x: '984', y: 230 },
{ x: '986', y: 24 },
{ x: '987', y: 250 },
{ x: '988', y: 26 },
{ x: '989', y: 270 },
],
},
options: {
shapes: {
type: 'vtiles',
url: 'https://static.opendatasoft.com/vector-tiles/fr_40_region_2021/{z}/{x}/{y}.pbf',
sourceLayer: 'fr_40_region_2021',
key: 'reg_code',
},
activeShapes: ['11', '93'],
emptyValueColor: 'red',
colorsScale: {
type: ColorScaleTypes.Palette,
colors: ['#bcf5f9', '#89c5fd', '#3a80ec', '#1e03fd', '#0229bf'],
},
aspectRatio: 1,
legend: {
title: 'I Am Legend',
},
tooltip: {
label: defaultLabelCallback,
},
},
};
StudioVectorTilesChoropleth.args = StudioVectorTilesChoroplethArgs;
6 changes: 4 additions & 2 deletions packages/visualizations-react/stories/Map/shapes.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
export const shapes = {
import { ChoroplethShapeGeoJsonValue } from '@opendatasoft/visualizations';

export const shapes: ChoroplethShapeGeoJsonValue = {
type: 'geojson',
geoJson: {
type: 'FeatureCollection',
Expand Down Expand Up @@ -567,7 +569,7 @@ export const shapes = {
},
};

export const multiPolygonShapes = {
export const multiPolygonShapes: ChoroplethShapeGeoJsonValue = {
type: 'geojson',
geoJson: {
type: 'FeatureCollection',
Expand Down
Loading

0 comments on commit b9d1333

Please sign in to comment.