forked from apache/superset
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(plugin-chart-choropleth-map): add package (#560)
* feat(plugin-chart-choropleth-map): scaffold and load map (#527) * feat: add package * feat: storybook working * feat: load usa and world map * refactor: clean up * fix: remove test data * refactor: utilize dynamic import * build: remove unused dependencies * fix: address pr comments * fix: comment * feat(plugin-chart-choropleth-map): add more country maps (#529) * feat(plugin-chart-choropleth-map): add zooming (#528) * feat: add zooming * feat: can zoom in and out * feat: add zoom controls * refactor: extract controls * fix: address comments * feat(plugin-chart-choropleth-map): add encoding (#541) * feat: add encoder * feat: add encoding * docs: add categorical * fix: any * docs: update storybook * feat(plugin-chart-choropleth-map): add tooltip (#548) * feat: support tooltip * feat: support tooltip fields * fix: default projection * build: bump dependency * build: update dependency * build: mark private
- Loading branch information
1 parent
c966fc4
commit 72c2b7a
Showing
51 changed files
with
205,612 additions
and
5 deletions.
There are no files selected for viewing
1 change: 0 additions & 1 deletion
1
...ckages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-country-map/data.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,3 @@ | ||
| /* eslint-disable sort-keys */ | ||
| export default [ | ||
| { | ||
| country_id: 'FR-01', | ||
|
|
||
107 changes: 107 additions & 0 deletions
107
...ckages/superset-ui-demo/storybook/stories/plugins/plugin-chart-choropleth-map/Stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import React from 'react'; | ||
| import { SuperChart } from '@superset-ui/chart'; | ||
| import { | ||
| maps, | ||
| ChoroplethMapChartPlugin, | ||
| } from '../../../../../../plugins/plugin-chart-choropleth-map/src'; | ||
| import { withKnobs, select } from '@storybook/addon-knobs'; | ||
| import useFakeMapData from './useFakeMapData'; | ||
|
|
||
| new ChoroplethMapChartPlugin().configure({ key: 'choropleth-map' }).register(); | ||
|
|
||
| export default { | ||
| title: 'Chart Plugins|plugin-chart-choropleth-map', | ||
| decorators: [withKnobs], | ||
| }; | ||
|
|
||
| export const worldMap = () => { | ||
| const map = select( | ||
| 'Map', | ||
| maps.map(m => m.key), | ||
| 'world', | ||
| 'map', | ||
| ); | ||
|
|
||
| return ( | ||
| <SuperChart | ||
| chartType="choropleth-map" | ||
| width={800} | ||
| height={450} | ||
| queryData={{ data: useFakeMapData(map) }} | ||
| formData={{ | ||
| map, | ||
| encoding: { | ||
| key: { | ||
| field: 'key', | ||
| title: 'Location', | ||
| }, | ||
| fill: { | ||
| type: 'quantitative', | ||
| field: 'numStudents', | ||
| scale: { | ||
| range: ['#cecee5', '#3f007d'], | ||
| }, | ||
| }, | ||
| }, | ||
| }} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export const usa = () => ( | ||
| <SuperChart | ||
| chartType="choropleth-map" | ||
| width={800} | ||
| height={450} | ||
| queryData={{ data: useFakeMapData('usa') }} | ||
| formData={{ | ||
| map: 'usa', | ||
| encoding: { | ||
| key: { | ||
| field: 'key', | ||
| title: 'State', | ||
| }, | ||
| fill: { | ||
| type: 'quantitative', | ||
| field: 'numStudents', | ||
| title: 'No. of students', | ||
| scale: { | ||
| range: ['#fdc28c', '#7f2704'], | ||
| }, | ||
| }, | ||
| tooltip: [ | ||
| { | ||
| field: 'favoriteFruit', | ||
| title: 'Fruit', | ||
| }, | ||
| ], | ||
| }, | ||
| }} | ||
| /> | ||
| ); | ||
|
|
||
| export const categoricalColor = () => ( | ||
| <SuperChart | ||
| chartType="choropleth-map" | ||
| width={800} | ||
| height={450} | ||
| queryData={{ data: useFakeMapData('usa') }} | ||
| formData={{ | ||
| map: 'usa', | ||
| encoding: { | ||
| key: { | ||
| field: 'key', | ||
| title: 'State', | ||
| }, | ||
| fill: { | ||
| type: 'nominal', | ||
| field: 'favoriteFruit', | ||
| scale: { | ||
| domain: ['apple', 'banana', 'grape'], | ||
| range: ['#e74c3c', '#f1c40f', '#9b59b6'], | ||
| }, | ||
| }, | ||
| }, | ||
| }} | ||
| /> | ||
| ); |
26 changes: 26 additions & 0 deletions
26
...rset-ui-demo/storybook/stories/plugins/plugin-chart-choropleth-map/generateFakeMapData.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import loadMap from '../../../../../../plugins/plugin-chart-choropleth-map/src/chart/loadMap'; | ||
|
|
||
| const FRUITS = ['apple', 'banana', 'grape']; | ||
|
|
||
| export type FakeMapData = { | ||
| key: string; | ||
| favoriteFruit: string; | ||
| numStudents: number; | ||
| }[]; | ||
|
|
||
| /** | ||
| * Generate mock data for the given map | ||
| * Output is a promise of an array | ||
| * { key, favoriteFruit, numStudents }[] | ||
| * @param map map name | ||
| */ | ||
| export default async function generateFakeMapData(map: string) { | ||
| const { object, metadata } = await loadMap(map); | ||
| return object.features | ||
| .map(f => metadata.keyAccessor(f)) | ||
| .map(key => ({ | ||
| key, | ||
| favoriteFruit: FRUITS[Math.round(Math.random() * 2)], | ||
| numStudents: Math.round(Math.random() * 100), | ||
| })); | ||
| } |
14 changes: 14 additions & 0 deletions
14
.../superset-ui-demo/storybook/stories/plugins/plugin-chart-choropleth-map/useFakeMapData.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { useState, useEffect } from 'react'; | ||
| import generateFakeMapData, { FakeMapData } from './generateFakeMapData'; | ||
|
|
||
| export default function useFakeMapData(map: string) { | ||
| const [mapData, setMapData] = useState<FakeMapData | undefined>(undefined); | ||
|
|
||
| useEffect(() => { | ||
| generateFakeMapData(map).then(mapData => { | ||
| setMapData(mapData); | ||
| }); | ||
| }, [map]); | ||
|
|
||
| return mapData; | ||
| } |
32 changes: 32 additions & 0 deletions
32
...temporary_superset_ui/superset-ui/plugins/plugin-chart-choropleth-map/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| ## @superset-ui/plugin-chart-choropleth-map | ||
|
|
||
| [](https://img.shields.io/npm/v/@superset-ui/plugin-chart-choropleth-map.svg?style=flat-square) | ||
| [](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-plugin-chart-choropleth-map) | ||
|
|
||
| This plugin provides Choropleth Map for Superset. | ||
|
|
||
| ### Usage | ||
|
|
||
| Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app. | ||
|
|
||
| ```js | ||
| import ChoroplethMapChartPlugin from '@superset-ui/plugin-chart-choropleth-map'; | ||
|
|
||
| new ChoroplethMapChartPlugin() | ||
| .configure({ key: 'choropleth-map' }) | ||
| .register(); | ||
| ``` | ||
|
|
||
| Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/superset-ui/?selectedKind=plugin-chart-choropleth-map) for more details. | ||
|
|
||
| ```js | ||
| <SuperChart | ||
| chartType="choropleth-map" | ||
| width={600} | ||
| height={600} | ||
| formData={...} | ||
| queryData={{ | ||
| data: {...}, | ||
| }} | ||
| /> | ||
| ``` |
53 changes: 53 additions & 0 deletions
53
...ontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-choropleth-map/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| { | ||
| "name": "@superset-ui/plugin-chart-choropleth-map", | ||
| "version": "0.0.0", | ||
| "description": "Superset Chart - Choropleth Map", | ||
| "sideEffects": false, | ||
| "private": true, | ||
| "main": "lib/index.js", | ||
| "module": "esm/index.js", | ||
| "files": [ | ||
| "esm", | ||
| "lib" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/apache-superset/superset-ui.git" | ||
| }, | ||
| "keywords": [ | ||
| "superset" | ||
| ], | ||
| "author": "Superset", | ||
| "license": "Apache-2.0", | ||
| "bugs": { | ||
| "url": "https://github.com/apache-superset/superset-ui/issues" | ||
| }, | ||
| "homepage": "https://github.com/apache-superset/superset-ui#readme", | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "dependencies": { | ||
| "@types/react": "^16.9.35", | ||
| "@types/d3-geo": "^1.11.1", | ||
| "@types/geojson": "^7946.0.3", | ||
| "@types/topojson-client": "^3.0.0", | ||
| "@types/topojson-specification": "^1.0.0", | ||
| "@vx/clip-path": "^0.0.196", | ||
| "@vx/event": "^0.0.196", | ||
| "@vx/pattern": "^0.0.196", | ||
| "@vx/tooltip": "^0.0.196", | ||
| "@vx/zoom": "^0.0.196", | ||
| "encodable": "^0.3.7", | ||
| "geojson": "^0.5.0", | ||
| "lodash": "^4.17.15", | ||
| "topojson-client": "^3.1.0", | ||
| "d3-geo": "^1.12.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^16.13.1", | ||
| "@superset-ui/chart": "^0.13.3", | ||
| "@superset-ui/chart-composition": "^0.13.3", | ||
| "@superset-ui/translation": "^0.13.3", | ||
| "@superset-ui/style": "^0.13.3" | ||
| } | ||
| } |
Oops, something went wrong.