mirror of
https://github.com/apache/superset.git
synced 2024-09-18 19:49:37 -04:00
add world map package
This commit is contained in:
parent
1d3e3c5c27
commit
b44a0b1613
@ -26,6 +26,7 @@ const metadata = new ChartMetadata({
|
||||
description: '',
|
||||
name: t('Calendar Heatmap'),
|
||||
thumbnail,
|
||||
useLegacyApi: true,
|
||||
});
|
||||
|
||||
export default class ChordChartPlugin extends ChartPlugin {
|
||||
|
@ -0,0 +1,34 @@
|
||||
## @superset-ui/legacy-plugin-chart-world-map
|
||||
|
||||
[![Version](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-world-map.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-world-map.svg?style=flat-square)
|
||||
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-legacy-plugin-chart-world-map&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-legacy-plugin-chart-world-map)
|
||||
|
||||
This plugin provides World 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 WorldmapChartPlugin from '@superset-ui/legacy-plugin-chart-world-map';
|
||||
|
||||
new WorldmapChartPlugin()
|
||||
.configure({ key: 'world-map' })
|
||||
.register();
|
||||
```
|
||||
|
||||
Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/superset-ui-legacy/?selectedKind=plugin-chart-world-map) for more details.
|
||||
|
||||
```js
|
||||
<SuperChart
|
||||
chartType="world-map"
|
||||
chartProps={{
|
||||
width: 600,
|
||||
height: 600,
|
||||
formData: {...},
|
||||
payload: {
|
||||
data: {...},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
```
|
@ -0,0 +1,44 @@
|
||||
{
|
||||
"name": "@superset-ui/legacy-plugin-chart-world-map",
|
||||
"version": "0.0.0",
|
||||
"description": "Superset Legacy Chart - World Map",
|
||||
"sideEffects": false,
|
||||
"main": "lib/index.js",
|
||||
"module": "esm/index.js",
|
||||
"files": [
|
||||
"esm",
|
||||
"lib"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/apache-superset/superset-ui-legacy.git"
|
||||
},
|
||||
"keywords": [
|
||||
"superset"
|
||||
],
|
||||
"author": "Superset",
|
||||
"license": "Apache-2.0",
|
||||
"bugs": {
|
||||
"url": "https://github.com/apache-superset/superset-ui-legacy/issues"
|
||||
},
|
||||
"homepage": "https://github.com/apache-superset/superset-ui-legacy#readme",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"dependencies": {
|
||||
"@superset-ui/core": "^0.9.x",
|
||||
"d3": "^3.5.17",
|
||||
"datamaps": "^0.5.8",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@superset-ui/chart": "^0.9.x",
|
||||
"@superset-ui/number-format": "^0.9.x",
|
||||
"@superset-ui/translation": "^0.9.x"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@superset-ui/chart": "^0.9.x",
|
||||
"@superset-ui/number-format": "^0.9.x",
|
||||
"@superset-ui/translation": "^0.9.x"
|
||||
}
|
||||
}
|
@ -0,0 +1,22 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { reactify } from '@superset-ui/chart';
|
||||
import WorldMap from './WorldMap';
|
||||
|
||||
export default reactify(WorldMap);
|
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
.superset-legacy-chart-world-map svg {
|
||||
background-color: #feffff;
|
||||
}
|
||||
|
||||
.superset-legacy-chart-world-map {
|
||||
position: relative;
|
||||
}
|
@ -0,0 +1,129 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
/* eslint-disable sort-keys */
|
||||
import d3 from 'd3';
|
||||
import PropTypes from 'prop-types';
|
||||
import Datamap from 'datamaps/dist/datamaps.world.min';
|
||||
import { getNumberFormatter } from '@superset-ui/number-format';
|
||||
import './WorldMap.css';
|
||||
|
||||
const propTypes = {
|
||||
data: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
country: PropTypes.string,
|
||||
latitude: PropTypes.number,
|
||||
longitude: PropTypes.number,
|
||||
name: PropTypes.string,
|
||||
m1: PropTypes.number,
|
||||
m2: PropTypes.number,
|
||||
}),
|
||||
),
|
||||
height: PropTypes.number,
|
||||
maxBubbleSize: PropTypes.number,
|
||||
showBubbles: PropTypes.bool,
|
||||
};
|
||||
|
||||
const formatter = getNumberFormatter();
|
||||
|
||||
function WorldMap(element, props) {
|
||||
const { data, height, maxBubbleSize, showBubbles } = props;
|
||||
|
||||
const div = d3.select(element);
|
||||
div.classed('superset-legacy-chart-world-map', true);
|
||||
|
||||
const container = element;
|
||||
container.style.height = `${height}px`;
|
||||
div.selectAll('*').remove();
|
||||
|
||||
// Ignore XXX's to get better normalization
|
||||
const filteredData = data.filter(d => d.country && d.country !== 'XXX');
|
||||
|
||||
const ext = d3.extent(filteredData, d => d.m1);
|
||||
const extRadius = d3.extent(filteredData, d => d.m2);
|
||||
const radiusScale = d3.scale
|
||||
.linear()
|
||||
.domain([extRadius[0], extRadius[1]])
|
||||
.range([1, maxBubbleSize]);
|
||||
|
||||
const colorScale = d3.scale
|
||||
.linear()
|
||||
.domain([ext[0], ext[1]])
|
||||
.range(['#FFF', 'black']);
|
||||
|
||||
const processedData = filteredData.map(d => ({
|
||||
...d,
|
||||
radius: radiusScale(d.m2),
|
||||
fillColor: colorScale(d.m1),
|
||||
}));
|
||||
|
||||
const mapData = {};
|
||||
processedData.forEach(d => {
|
||||
mapData[d.country] = d;
|
||||
});
|
||||
|
||||
const map = new Datamap({
|
||||
element,
|
||||
data: processedData,
|
||||
fills: {
|
||||
defaultFill: '#ddd',
|
||||
},
|
||||
geographyConfig: {
|
||||
popupOnHover: true,
|
||||
highlightOnHover: true,
|
||||
borderWidth: 1,
|
||||
borderColor: '#fff',
|
||||
highlightBorderColor: '#fff',
|
||||
highlightFillColor: '#005a63',
|
||||
highlightBorderWidth: 1,
|
||||
popupTemplate: (geo, d) =>
|
||||
`<div class="hoverinfo"><strong>${d.name}</strong><br>${formatter(d.m1)}</div>`,
|
||||
},
|
||||
bubblesConfig: {
|
||||
borderWidth: 1,
|
||||
borderOpacity: 1,
|
||||
borderColor: '#005a63',
|
||||
popupOnHover: true,
|
||||
radius: null,
|
||||
popupTemplate: (geo, d) =>
|
||||
`<div class="hoverinfo"><strong>${d.name}</strong><br>${formatter(d.m2)}</div>`,
|
||||
fillOpacity: 0.5,
|
||||
animate: true,
|
||||
highlightOnHover: true,
|
||||
highlightFillColor: '#005a63',
|
||||
highlightBorderColor: 'black',
|
||||
highlightBorderWidth: 2,
|
||||
highlightBorderOpacity: 1,
|
||||
highlightFillOpacity: 0.85,
|
||||
exitDelay: 100,
|
||||
key: JSON.stringify,
|
||||
},
|
||||
});
|
||||
|
||||
map.updateChoropleth(mapData);
|
||||
|
||||
if (showBubbles) {
|
||||
map.bubbles(processedData);
|
||||
div.selectAll('circle.datamaps-bubble').style('fill', '#005a63');
|
||||
}
|
||||
}
|
||||
|
||||
WorldMap.displayName = 'WorldMap';
|
||||
WorldMap.propTypes = propTypes;
|
||||
|
||||
export default WorldMap;
|
Binary file not shown.
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
After Width: | Height: | Size: 133 KiB |
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { t } from '@superset-ui/translation';
|
||||
import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
|
||||
import transformProps from './transformProps';
|
||||
import thumbnail from './images/thumbnail.png';
|
||||
|
||||
const metadata = new ChartMetadata({
|
||||
credits: ['http://datamaps.github.io/'],
|
||||
description: '',
|
||||
name: t('World Map'),
|
||||
thumbnail,
|
||||
});
|
||||
|
||||
export default class WorldMapChartPlugin extends ChartPlugin {
|
||||
constructor() {
|
||||
super({
|
||||
loadChart: () => import('./ReactWorldMap.js'),
|
||||
metadata,
|
||||
transformProps,
|
||||
});
|
||||
}
|
||||
}
|
@ -0,0 +1,29 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
export default function transformProps(chartProps) {
|
||||
const { height, formData, payload } = chartProps;
|
||||
const { maxBubbleSize, showBubbles } = formData;
|
||||
|
||||
return {
|
||||
data: payload.data,
|
||||
height,
|
||||
maxBubbleSize: parseInt(maxBubbleSize, 10),
|
||||
showBubbles,
|
||||
};
|
||||
}
|
Loading…
Reference in New Issue
Block a user