feat: Map Chart widget (#6929)
* FEATURE-6314 : Map Chart Widget -- Scaffold the widget * FEATURE-6314 : Map Chart Widget -- Add a new widget icon -- Proptotype the property pane for the first time * FEATURE-6314 : Map Chart Widget -- Install fusionmaps -- Draw naive world map for the PoC * FEATURE-6314 : Map Chart Widget -- Integrate the limited number of FusionMaps into the widget -- Bind basic properties and a action into the map * FEATURE-6314 : Map Chart Widget -- Comment out the console statements for linting error * FEATURE-6314 : Map Chart Widget -- Update dependency versioning * feat: Map Chart Widget -- Fix on linting errors, including unused variables, console statement * Feat: Map Chart Widget -- Install dependencies from scratch * fix: increased max chink size allowed in the build config * Feat: Map Chart Widget -- Refactor code base according to the changed widget structure -- Add cleanup for removing event listener -- Eliminate the unnecessary codes, comments * Feat: Map Chart Widget -- Remove unnecessary icon -- Refactor on constants * Feat: Map Chart Widget -- Add a cypress test case for map type changes -- Add a cypress test case for title change -- Add a cypress test case for toggling show labels -- Add a cypress test case for onEntityClick event listener * feat: Map Chart Widget -- Scaffold the setup for custom map config * feat: Map Chart Widget -- Dynamically import map definition files * feat: Map Chart Widget -- Eliminate unnecessary comments * feat: Fusion Maps Widget -- Update base dependencies * partial map chart changes. * feat: Map Chart Widget -- Refactor entire code base, removing custom configs -- Disable prefetching on mapCharts chunk * feat: Map Chart Widget -- Comment onEntityClick test case out * feat: Map Chart Widget -- Fix on onEntityClick test case * feat: Map Chart Widget -- Change the widget icon -- Rename onEnityClick to onDataPointClick -- Expose selectedDataPoint -- Add a new Cypress test case for the toast message on onDataPointClick * feat: Map Chart Widget -- Add a new property colorRange -- Add default values for data and colorRange properties -- Eliminate unnecessary constant colorRange * feat: Map Chart Widget -- update selectedDataPoint meta property unconditionally * feat: Map Chart Widget -- Update initial map type config to be consistent with the corresponding property * feat: Map Chart Widget -- Add widget icon for entity explorer * feat: Map Chart Widget -- Make array elements of data, colorRange properties unique * feat: Map Chart Widget -- Prevent re-render when disabling color codes and double-clicking on entities * feat: Map Chart Widget -- Declare defaultChartConfigs variable inside component class -- Replace deprecated substr method with substring * feat: Map Chart widget -- Complement validation rules for data property * feat: Map Chart widget -- Define rows and cols without using GRID_DENSITY_MIGRATION_V1 -- Change updateDataSet hook by replacing switch statement with object mapping * feat: Map Chart widget -- Pull out dataSetMapping from the updateDataSet hook * feat: Map Chart widget -- Force click events with regard to onDataPointClick test cases * feat: Map Chart widget -- Update fusioncharts and fusionmaps npm packages to the latest version * feat: Map Chart widget -- Make contents responsive using CSS styles instead of directly changing width, height attributes of the chart Co-authored-by: somangshu <somangshu.goswami1508@gmail.com> Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: Arpit Mohan <arpit@appsmith.com>
This commit is contained in:
Paul Li
GitHub
parent
59c227a36b
commit
85d54a7b56
74
app/client/cypress/fixtures/MapChartDsl.json
Normal file
74
app/client/cypress/fixtures/MapChartDsl.json
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
{
|
||||
"dsl": {
|
||||
"widgetName": "MainContainer",
|
||||
"backgroundColor": "none",
|
||||
"rightColumn": 1206.35,
|
||||
"snapColumns": 64,
|
||||
"detachFromLayout": true,
|
||||
"widgetId": "0",
|
||||
"topRow": 0,
|
||||
"bottomRow": 710,
|
||||
"containerStyle": "none",
|
||||
"snapRows": 125,
|
||||
"parentRowSpace": 1,
|
||||
"type": "CANVAS_WIDGET",
|
||||
"canExtend": true,
|
||||
"version": 46,
|
||||
"minHeight": 690,
|
||||
"parentColumnSpace": 1,
|
||||
"dynamicBindingPathList": [],
|
||||
"leftColumn": 0,
|
||||
"children": [
|
||||
{
|
||||
"widgetName": "MapChart1",
|
||||
"rightColumn": 33,
|
||||
"data": [
|
||||
{
|
||||
"id": "NA",
|
||||
"value": "515"
|
||||
},
|
||||
{
|
||||
"id": "SA",
|
||||
"value": "373"
|
||||
},
|
||||
{
|
||||
"id": "AS",
|
||||
"value": "3875"
|
||||
},
|
||||
{
|
||||
"id": "EU",
|
||||
"value": "727"
|
||||
},
|
||||
{
|
||||
"id": "AF",
|
||||
"value": "885"
|
||||
},
|
||||
{
|
||||
"id": "AU",
|
||||
"value": "32"
|
||||
}
|
||||
],
|
||||
"isCanvas": false,
|
||||
"displayName": "Map Chart",
|
||||
"iconSVG": "/static/media/icon.87faa91c.svg",
|
||||
"widgetId": "23hfx8apm2",
|
||||
"topRow": 7,
|
||||
"bottomRow": 39,
|
||||
"mapType": "WORLD",
|
||||
"parentRowSpace": 10,
|
||||
"isVisible": true,
|
||||
"type": "MAP_CHART_WIDGET",
|
||||
"version": 1,
|
||||
"hideCard": false,
|
||||
"parentId": "0",
|
||||
"mapTitle": "Global Population",
|
||||
"renderMode": "CANVAS",
|
||||
"isLoading": false,
|
||||
"parentColumnSpace": 18.66171875,
|
||||
"showLabels": true,
|
||||
"leftColumn": 9,
|
||||
"key": "20o6b88hp8"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
const commonLocators = require("../../../../locators/commonlocators.json");
|
||||
const viewWidgetsPage = require("../../../../locators/ViewWidgets.json");
|
||||
const widgetsPage = require("../../../../locators/Widgets.json");
|
||||
const modalWidgetPage = require("../../../../locators/ModalWidget.json");
|
||||
const dsl = require("../../../../fixtures/MapChartDsl.json");
|
||||
|
||||
describe("Map Chart Widget Functionality", function() {
|
||||
before(() => {
|
||||
cy.addDsl(dsl);
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
cy.openPropertyPane("mapchartwidget");
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cy.goToEditFromPublish();
|
||||
});
|
||||
|
||||
it("Change Title", function() {
|
||||
cy.testCodeMirror(this.data.chartIndata);
|
||||
cy.get(viewWidgetsPage.chartInnerText)
|
||||
.contains("App Sign Up")
|
||||
.should("have.text", "App Sign Up");
|
||||
cy.PublishtheApp();
|
||||
});
|
||||
|
||||
it("Show Labels: FALSE", function() {
|
||||
cy.togglebarDisable(commonLocators.mapChartShowLabels);
|
||||
cy.get(viewWidgetsPage.mapChartEntityLabels).should("not.exist");
|
||||
cy.PublishtheApp();
|
||||
});
|
||||
|
||||
it("Show Labels: TRUE", function() {
|
||||
cy.togglebar(commonLocators.mapChartShowLabels);
|
||||
cy.get(viewWidgetsPage.mapChartEntityLabels)
|
||||
.eq(1)
|
||||
.should("exist");
|
||||
cy.PublishtheApp();
|
||||
});
|
||||
|
||||
it("Map type: World with Antarctica", function() {
|
||||
// Change the map type
|
||||
cy.updateMapType("World with Antarctica");
|
||||
// Verify the number of entities
|
||||
cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 7);
|
||||
cy.PublishtheApp();
|
||||
});
|
||||
|
||||
it("Map type: World", function() {
|
||||
// Change the map type
|
||||
cy.updateMapType("World");
|
||||
// Verify the number of entities
|
||||
cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 6);
|
||||
cy.PublishtheApp();
|
||||
});
|
||||
|
||||
it("Map type: Europe", function() {
|
||||
// Change the map type
|
||||
cy.updateMapType("Europe");
|
||||
// Verify the number of entities
|
||||
cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 47);
|
||||
cy.PublishtheApp();
|
||||
});
|
||||
|
||||
it("Map type: North America", function() {
|
||||
// Change the map type
|
||||
cy.updateMapType("North America");
|
||||
// Verify the number of entities
|
||||
cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 26);
|
||||
cy.PublishtheApp();
|
||||
});
|
||||
|
||||
it("Map type: South America", function() {
|
||||
// Change the map type
|
||||
cy.updateMapType("South America");
|
||||
// Verify the number of entities
|
||||
cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 16);
|
||||
cy.PublishtheApp();
|
||||
});
|
||||
|
||||
it("Map type: Asia", function() {
|
||||
// Change the map type
|
||||
cy.updateMapType("Asia");
|
||||
// Verify the number of entities
|
||||
cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 49);
|
||||
cy.PublishtheApp();
|
||||
});
|
||||
|
||||
it("Map type: Oceania", function() {
|
||||
// Change the map type
|
||||
cy.updateMapType("Oceania");
|
||||
// Verify the number of entities
|
||||
cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 15);
|
||||
cy.PublishtheApp();
|
||||
});
|
||||
|
||||
it("Map type: Africa", function() {
|
||||
// Change the map type
|
||||
cy.updateMapType("Africa");
|
||||
// Verify the number of entities
|
||||
cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 56);
|
||||
cy.PublishtheApp();
|
||||
});
|
||||
|
||||
it("Action: onDataPointClick, Open modal", function() {
|
||||
// Create the Alert Modal and verify Modal name
|
||||
cy.createModal(this.data.ModalName);
|
||||
cy.PublishtheApp();
|
||||
cy.get(widgetsPage.mapChartPlot)
|
||||
.children()
|
||||
.first()
|
||||
.click({ force: true });
|
||||
cy.get(modalWidgetPage.modelTextField).should(
|
||||
"have.text",
|
||||
this.data.ModalName,
|
||||
);
|
||||
});
|
||||
|
||||
it("Action: onDataPointClick, Show message using selectedDataPoint", function() {
|
||||
const expectedEntityData = {
|
||||
value: 2.04,
|
||||
label: "South America",
|
||||
shortLabel: "SA",
|
||||
originalId: "SA",
|
||||
id: "sa",
|
||||
};
|
||||
// Set the map type to default
|
||||
cy.updateMapType("World");
|
||||
// Set action details for onDataPointClick
|
||||
const boundMessage = `{{JSON.stringify(MapChart1.selectedDataPoint)}}`;
|
||||
cy.addAction(boundMessage);
|
||||
cy.get(commonLocators.chooseMsgType)
|
||||
.last()
|
||||
.click();
|
||||
cy.get(commonLocators.chooseAction)
|
||||
.children()
|
||||
.contains("Success")
|
||||
.click();
|
||||
// Click on the entity, South America
|
||||
cy.get(widgetsPage.mapChartPlot)
|
||||
.children()
|
||||
.first()
|
||||
.click({ force: true });
|
||||
// Assert
|
||||
cy.validateToastMessage(JSON.stringify(expectedEntityData));
|
||||
});
|
||||
});
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
"imageWidget": ".t--draggable-imagewidget",
|
||||
"chartWidget": ".t--draggable-chartwidget",
|
||||
"chartType": ".t--property-control-charttype .bp3-popover-target",
|
||||
"mapType": ".t--property-control-maptype .bp3-popover-target",
|
||||
"destin": ".appsmith_widget_01ewdomru7",
|
||||
"mapWidget": ".t--draggable-mapwidget",
|
||||
"dropdownSelectButton": ".t--open-dropdown-Select",
|
||||
|
|
@ -30,5 +31,6 @@
|
|||
"defaultImage": ".t--property-control-defaultimage .CodeMirror textarea",
|
||||
"Chartlabel": ".t--draggable-chartwidget g:nth-child(5) text",
|
||||
"PieChartLabel": ".t--draggable-chartwidget g g:nth-child(1) g text",
|
||||
"pickMyLocation": ".t--draggable-mapwidget div[title='Pick My Location']"
|
||||
"pickMyLocation": ".t--draggable-mapwidget div[title='Pick My Location']",
|
||||
"mapChartEntityLabels": ".t--draggable-mapchartwidget g[class*='-entityLabels'] text"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -155,6 +155,7 @@
|
|||
"filterApplyBtn":".t--apply-filter-btn",
|
||||
"filterCloseBtn":".t--close-filter-btn",
|
||||
"header":"#header-root",
|
||||
"mapChartPlot": "g[class$='-manager-plot']",
|
||||
"explorerSwitchId": "#switcher--explorer",
|
||||
"widgetSwitchId":"#switcher--widgets",
|
||||
"modalWidget": ".t--modal-widget",
|
||||
|
|
|
|||
|
|
@ -149,5 +149,6 @@
|
|||
"dropdownWidget": ".t--draggable-dropdownwidget",
|
||||
"textWidget": ".t--draggable-textwidget",
|
||||
"filepickerv2": ".t--draggable-filepickerwidgetv2",
|
||||
"dashboardItemName": ".uppy-Dashboard-Item-name"
|
||||
"dashboardItemName": ".uppy-Dashboard-Item-name",
|
||||
"mapChartShowLabels": ".t--property-control-showlabels input"
|
||||
}
|
||||
|
|
@ -3154,6 +3154,22 @@ Cypress.Commands.add("createAmazonS3Datasource", () => {
|
|||
cy.testSaveDatasource();
|
||||
});
|
||||
|
||||
Cypress.Commands.add("updateMapType", (mapType) => {
|
||||
// Command to change the map chart type if the property pane of the map chart widget is opened.
|
||||
cy.get(viewWidgetsPage.mapType)
|
||||
.last()
|
||||
.click({ force: true });
|
||||
cy.get(commonlocators.dropdownmenu)
|
||||
.children()
|
||||
.contains(mapType)
|
||||
.click({ force: true });
|
||||
|
||||
cy.get(viewWidgetsPage.mapType + " span.cs-text").should(
|
||||
"have.text",
|
||||
mapType,
|
||||
);
|
||||
});
|
||||
|
||||
Cypress.Commands.add("createJSObject", (JSCode) => {
|
||||
cy.NavigateToJSEditor();
|
||||
cy.wait(1000);
|
||||
|
|
|
|||
|
|
@ -58,7 +58,8 @@
|
|||
"fast-xml-parser": "^3.17.5",
|
||||
"flow-bin": "^0.148.0",
|
||||
"fuse.js": "^3.4.5",
|
||||
"fusioncharts": "^3.16.0",
|
||||
"fusioncharts": "^3.18.0",
|
||||
"fusionmaps": "^3.18.0",
|
||||
"history": "^4.10.1",
|
||||
"husky": "^3.0.5",
|
||||
"immer": "^9.0.6",
|
||||
|
|
@ -104,6 +105,7 @@
|
|||
"react-documents": "^1.0.4",
|
||||
"react-dom": "^16.7.0",
|
||||
"react-full-screen": "^1.1.0",
|
||||
"react-fusioncharts": "^3.1.2",
|
||||
"react-google-maps": "^9.4.5",
|
||||
"react-google-recaptcha": "^2.1.0",
|
||||
"react-helmet": "^5.2.1",
|
||||
|
|
|
|||
6
app/client/src/assets/icons/widget/map-chart.svg
Executable file
6
app/client/src/assets/icons/widget/map-chart.svg
Executable file
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.50001 11.8034V18.5L14.5 21V11.55L12 15C11.3917 14.2179 10.4119 12.9626 9.50001 11.8034Z" fill="#4B4848"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 10.17V21L20.5 18V6L17 8.1L15.5 10.17Z" fill="#4B4848"/>
|
||||
<path d="M3.5 9V21L8.5 18V10.5374C8.5 10.5374 7.83441 9.63336 7.5 9C7.12002 8.28033 6.72229 7.06662 6.72229 7.06662L3.5 9Z" fill="#4B4848"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.1559 9.87818C8.30481 8.73014 7.6 7.67255 7.6 6.35454C7.6 3.95998 9.56392 2.01104 11.9821 2H12.0032C14.431 2 16.4065 3.95362 16.4065 6.35454C16.4065 7.67255 15.7017 8.73038 14.8506 9.87818C14.8506 9.87818 12.1182 13.3703 12.0069 13.5208L9.1559 9.87818Z" fill="#4B4848"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 835 B |
|
|
@ -175,6 +175,10 @@ export const HelpMap: Record<string, { path: string; searchKey: string }> = {
|
|||
path: "/widget-reference/switch-group",
|
||||
searchKey: "Switch Group",
|
||||
},
|
||||
MAP_CHART_WIDGET: {
|
||||
path: "/widget-reference/map-chart",
|
||||
searchKey: "Map Chart",
|
||||
},
|
||||
};
|
||||
|
||||
export const HelpBaseURL = "https://docs.appsmith.com";
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ import { ReactComponent as ButtonGroupIcon } from "assets/icons/widget/button-gr
|
|||
import { ReactComponent as ProgressBarIcon } from "assets/icons/widget/progressbar-icon.svg";
|
||||
import { ReactComponent as SwitchGroupIcon } from "assets/icons/widget/switch-group.svg";
|
||||
import { ReactComponent as CameraIcon } from "assets/icons/widget/camera.svg";
|
||||
import { ReactComponent as MapChartIcon } from "assets/icons/widget/map-chart.svg";
|
||||
|
||||
/* eslint-disable react/display-name */
|
||||
|
||||
|
|
@ -244,6 +245,11 @@ export const WidgetIcons: {
|
|||
<CameraIcon />
|
||||
</StyledIconWrapper>
|
||||
),
|
||||
MAP_CHART_WIDGET: (props: IconProps) => (
|
||||
<StyledIconWrapper {...props}>
|
||||
<MapChartIcon />
|
||||
</StyledIconWrapper>
|
||||
),
|
||||
};
|
||||
|
||||
export type WidgetIcon = typeof WidgetIcons[keyof typeof WidgetIcons];
|
||||
|
|
|
|||
|
|
@ -114,12 +114,14 @@ import ProgressBarWidget, {
|
|||
import SwitchGroupWidget, {
|
||||
CONFIG as SWITCH_GROUP_WIDGET_CONFIG,
|
||||
} from "widgets/SwitchGroupWidget";
|
||||
|
||||
import log from "loglevel";
|
||||
|
||||
import CameraWidget, {
|
||||
CONFIG as CAMERA_WIDGET_CONFIG,
|
||||
} from "widgets/CameraWidget";
|
||||
import MapChartWidget, {
|
||||
CONFIG as MAP_CHART_WIDGET_CONFIG,
|
||||
} from "widgets/MapChartWidget";
|
||||
|
||||
import log from "loglevel";
|
||||
|
||||
export const registerWidgets = () => {
|
||||
const start = performance.now();
|
||||
|
|
@ -167,6 +169,7 @@ export const registerWidgets = () => {
|
|||
registerWidget(AudioWidget, AUDIO_WIDGET_CONFIG);
|
||||
registerWidget(ProgressBarWidget, PROGRESSBAR_WIDGET_CONFIG);
|
||||
registerWidget(CameraWidget, CAMERA_WIDGET_CONFIG);
|
||||
registerWidget(MapChartWidget, MAP_CHART_WIDGET_CONFIG);
|
||||
|
||||
log.debug("Widget registration took: ", performance.now() - start, "ms");
|
||||
};
|
||||
|
|
|
|||
|
|
@ -449,6 +449,13 @@ export const entityDefinitions: Record<string, unknown> = {
|
|||
videoDataURL: "string",
|
||||
videoRawBinary: "string",
|
||||
},
|
||||
MAP_CHART_WIDGET: {
|
||||
"!doc":
|
||||
"Map Chart widget shows the graphical representation of your data on the map.",
|
||||
"!url": "https://docs.appsmith.com/widget-reference/map-chart",
|
||||
isVisible: isVisible,
|
||||
selectedDataPoint: "mapChartDataPoint",
|
||||
},
|
||||
};
|
||||
|
||||
export const GLOBAL_DEFS = {
|
||||
|
|
@ -483,6 +490,13 @@ export const GLOBAL_DEFS = {
|
|||
name: "text",
|
||||
type: "file",
|
||||
},
|
||||
mapChartDataPoint: {
|
||||
id: "string",
|
||||
label: "string",
|
||||
originalId: "string",
|
||||
shortLabel: "string",
|
||||
value: "number",
|
||||
},
|
||||
};
|
||||
|
||||
export const GLOBAL_FUNCTIONS = {
|
||||
|
|
|
|||
14
app/client/src/widgets/MapChartWidget/CustomMapConstants.ts
Normal file
14
app/client/src/widgets/MapChartWidget/CustomMapConstants.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
export const CUSTOM_MAP_PLUGINS: Record<string, any> = {
|
||||
world: require(`fusionmaps/maps/fusioncharts.world.js`),
|
||||
worldwithantarctica: require(`fusionmaps/maps/fusioncharts.worldwithantarctica.js`),
|
||||
europe: require(`fusionmaps/maps/fusioncharts.europe.js`),
|
||||
northamerica: require(`fusionmaps/maps/fusioncharts.northamerica.js`),
|
||||
southamerica: require(`fusionmaps/maps/fusioncharts.southamerica.js`),
|
||||
asia: require(`fusionmaps/maps/fusioncharts.asia.js`),
|
||||
oceania: require(`fusionmaps/maps/fusioncharts.oceania.js`),
|
||||
africa: require(`fusionmaps/maps/fusioncharts.africa.js`),
|
||||
};
|
||||
|
||||
export const CUSTOM_MAP_TYPES = Object.keys(CUSTOM_MAP_PLUGINS).map(
|
||||
(each) => `maps/${each}`,
|
||||
);
|
||||
217
app/client/src/widgets/MapChartWidget/component/index.tsx
Normal file
217
app/client/src/widgets/MapChartWidget/component/index.tsx
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import styled from "styled-components";
|
||||
// Include the react-fusioncharts component
|
||||
import ReactFC from "react-fusioncharts";
|
||||
// Include the fusioncharts library
|
||||
import FusionCharts, { ChartObject } from "fusioncharts";
|
||||
|
||||
// Import FusionMaps
|
||||
import FusionMaps from "fusioncharts/fusioncharts.maps";
|
||||
import World from "fusioncharts/maps/fusioncharts.world";
|
||||
|
||||
// Include the theme as fusion
|
||||
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
|
||||
|
||||
// Import the dataset and the colorRange of the map
|
||||
import { dataSetForWorld, MapTypes, MapColorObject } from "../constants";
|
||||
import { CUSTOM_MAP_PLUGINS } from "../CustomMapConstants";
|
||||
|
||||
// Adding the chart and theme as dependency to the core fusioncharts
|
||||
ReactFC.fcRoot(FusionCharts, FusionMaps, World, FusionTheme);
|
||||
|
||||
const MapChartContainer = styled.div`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: white;
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
export interface MapData {
|
||||
value?: string;
|
||||
displayValue?: string;
|
||||
toolText?: string;
|
||||
color?: string;
|
||||
alpha?: number;
|
||||
link?: string;
|
||||
font?: string;
|
||||
fontSize?: string;
|
||||
fontColor?: string;
|
||||
fontBold?: boolean;
|
||||
showLabel?: boolean;
|
||||
showToolTip?: boolean;
|
||||
labelConnectorColor?: string;
|
||||
labelConnectorAlpha?: number;
|
||||
useHoverColor?: boolean;
|
||||
}
|
||||
|
||||
export type MapType = keyof typeof MapTypes;
|
||||
|
||||
export interface EntityData {
|
||||
id: string;
|
||||
label: string;
|
||||
originalId: string;
|
||||
shortLabel: string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
function MapChartComponent(props: MapChartComponentProps) {
|
||||
const {
|
||||
caption,
|
||||
colorRange,
|
||||
data,
|
||||
onDataPointClick,
|
||||
showLabels,
|
||||
type,
|
||||
} = props;
|
||||
|
||||
// Creating the JSON object to store the chart configurations
|
||||
const defaultChartConfigs: ChartObject = {
|
||||
type: "maps/world", // The chart type
|
||||
width: "100%", // Width of the chart
|
||||
height: "100%", // Height of the chart
|
||||
dataFormat: "json", // Data type
|
||||
dataSource: {
|
||||
// Map Configuration
|
||||
chart: {
|
||||
caption: "Average Annual Population Growth",
|
||||
// subcaption: " 1955-2015",
|
||||
// numbersuffix: "%",
|
||||
includevalueinlabels: "1",
|
||||
labelsepchar: ": ",
|
||||
entityFillHoverColor: "#FFF9C4",
|
||||
theme: "fusion",
|
||||
},
|
||||
// Aesthetics; ranges synced with the slider
|
||||
colorRange: {
|
||||
gradient: "0",
|
||||
},
|
||||
// Source data as JSON --> id represents countries of the world.
|
||||
data: dataSetForWorld,
|
||||
},
|
||||
events: {},
|
||||
};
|
||||
|
||||
const [chartConfigs, setChartConfigs] = useState(defaultChartConfigs);
|
||||
const [chart, setChart] = useState(new FusionCharts(defaultChartConfigs));
|
||||
|
||||
useEffect(() => {
|
||||
// Attach event handlers
|
||||
const newChartConfigs: any = {
|
||||
...chartConfigs,
|
||||
};
|
||||
newChartConfigs["events"]["entityClick"] = onDataPointClick;
|
||||
setChartConfigs(newChartConfigs);
|
||||
|
||||
return () => {
|
||||
chart.removeEventListener("entityClick", onDataPointClick);
|
||||
};
|
||||
}, [onDataPointClick]);
|
||||
|
||||
useEffect(() => {
|
||||
const newChartConfigs: any = {
|
||||
...chartConfigs,
|
||||
};
|
||||
newChartConfigs["dataSource"]["chart"]["caption"] = caption;
|
||||
setChartConfigs(newChartConfigs);
|
||||
}, [caption]);
|
||||
|
||||
useEffect(() => {
|
||||
const targetValue = showLabels ? "1" : "0";
|
||||
|
||||
const newChartConfigs: any = {
|
||||
...chartConfigs,
|
||||
};
|
||||
newChartConfigs["dataSource"]["chart"]["showLabels"] = targetValue;
|
||||
setChartConfigs(newChartConfigs);
|
||||
}, [showLabels]);
|
||||
|
||||
useEffect(() => {
|
||||
const newChartConfigs: any = {
|
||||
...chartConfigs,
|
||||
};
|
||||
newChartConfigs["dataSource"]["colorRange"]["color"] = colorRange;
|
||||
chart.setChartData(newChartConfigs.dataSource, "json");
|
||||
}, [JSON.stringify(colorRange)]);
|
||||
|
||||
useEffect(() => {
|
||||
const newChartConfigs = {
|
||||
...chartConfigs,
|
||||
dataSource: {
|
||||
...(chartConfigs.dataSource || {}),
|
||||
data,
|
||||
},
|
||||
};
|
||||
|
||||
switch (type) {
|
||||
case MapTypes.WORLD_WITH_ANTARCTICA:
|
||||
newChartConfigs.type = "maps/worldwithantarctica";
|
||||
break;
|
||||
case MapTypes.EUROPE:
|
||||
newChartConfigs.type = "maps/europe";
|
||||
break;
|
||||
case MapTypes.NORTH_AMERICA:
|
||||
newChartConfigs.type = "maps/northamerica";
|
||||
break;
|
||||
case MapTypes.SOURTH_AMERICA:
|
||||
newChartConfigs.type = "maps/southamerica";
|
||||
break;
|
||||
case MapTypes.ASIA:
|
||||
newChartConfigs.type = "maps/asia";
|
||||
break;
|
||||
case MapTypes.OCEANIA:
|
||||
newChartConfigs.type = "maps/oceania";
|
||||
break;
|
||||
case MapTypes.AFRICA:
|
||||
newChartConfigs.type = "maps/africa";
|
||||
break;
|
||||
|
||||
default:
|
||||
newChartConfigs.type = "maps/world";
|
||||
break;
|
||||
}
|
||||
|
||||
if (type === MapTypes.WORLD) {
|
||||
setChartConfigs(newChartConfigs);
|
||||
return;
|
||||
}
|
||||
|
||||
initializeMap(newChartConfigs);
|
||||
}, [JSON.stringify(data), type]);
|
||||
|
||||
// Called by FC-React component to return the rendered chart
|
||||
const renderComplete = (chart: FusionCharts.FusionCharts) => {
|
||||
setChart(chart);
|
||||
};
|
||||
|
||||
const initializeMap = (configs: ChartObject) => {
|
||||
const { type: mapType } = configs;
|
||||
if (mapType) {
|
||||
const alias = mapType.substring(5);
|
||||
const mapDefinition = CUSTOM_MAP_PLUGINS[alias];
|
||||
ReactFC.fcRoot(FusionCharts, FusionMaps, mapDefinition, FusionTheme);
|
||||
setChartConfigs(configs);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<MapChartContainer>
|
||||
<ReactFC {...chartConfigs} onRender={renderComplete} />
|
||||
</MapChartContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export interface MapChartComponentProps {
|
||||
caption: string;
|
||||
colorRange: MapColorObject[];
|
||||
data: MapData[];
|
||||
isVisible: boolean;
|
||||
onDataPointClick: (evt: any) => void;
|
||||
showLabels: boolean;
|
||||
type: MapType;
|
||||
}
|
||||
|
||||
export default MapChartComponent;
|
||||
988
app/client/src/widgets/MapChartWidget/constants.ts
Normal file
988
app/client/src/widgets/MapChartWidget/constants.ts
Normal file
|
|
@ -0,0 +1,988 @@
|
|||
// This file contains common constants which can be used across the widget configuration file (index.ts), widget and component folders.
|
||||
|
||||
export enum MapTypes {
|
||||
WORLD = "WORLD",
|
||||
WORLD_WITH_ANTARCTICA = "WORLD_WITH_ANTARCTICA",
|
||||
EUROPE = "EUROPE",
|
||||
NORTH_AMERICA = "NORTH_AMERICA",
|
||||
SOURTH_AMERICA = "SOURTH_AMERICA",
|
||||
ASIA = "ASIA",
|
||||
OCEANIA = "OCEANIA",
|
||||
AFRICA = "AFRICA",
|
||||
}
|
||||
|
||||
export interface MapColorObject {
|
||||
minValue: number;
|
||||
maxValue: number;
|
||||
displayValue: string;
|
||||
code: string;
|
||||
alpha: number;
|
||||
}
|
||||
|
||||
// Define the dataset and the colorRange of the map
|
||||
export const dataSetForWorld = [
|
||||
{
|
||||
id: "NA",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "SA",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "AS",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "EU",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "AF",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "AU",
|
||||
value: "1.30",
|
||||
},
|
||||
];
|
||||
|
||||
export const dataSetForWorldWithAntarctica = [
|
||||
{
|
||||
id: "NA",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "SA",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "AS",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "EU",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "AF",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "AU",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "AT",
|
||||
value: "1",
|
||||
},
|
||||
];
|
||||
|
||||
export const dataSetForEurope = [
|
||||
{
|
||||
id: "001",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "002",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "003",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "004",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "005",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "006",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "007",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "008",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "009",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "010",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "011",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "012",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "013",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "014",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "015",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "016",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "017",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "018",
|
||||
value: "1.30",
|
||||
},
|
||||
|
||||
{
|
||||
id: "019",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "020",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "021",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "022",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "023",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "024",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "025",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "026",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "027",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "028",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "029",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "030",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "031",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "032",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "033",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "034",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "035",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "036",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "037",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "038",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "039",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "040",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "041",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "042",
|
||||
value: "1.30",
|
||||
},
|
||||
|
||||
{
|
||||
id: "043",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "044",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "045",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "046",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "047",
|
||||
value: "2.58",
|
||||
},
|
||||
];
|
||||
|
||||
export const dataSetForNorthAmerica = [
|
||||
{
|
||||
id: "001",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "002",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "003",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "004",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "005",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "006",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "007",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "008",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "009",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "010",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "011",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "012",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "013",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "014",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "015",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "016",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "017",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "018",
|
||||
value: "1.30",
|
||||
},
|
||||
|
||||
{
|
||||
id: "019",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "020",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "021",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "022",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "023",
|
||||
value: "2.58",
|
||||
},
|
||||
];
|
||||
|
||||
export const dataSetForSouthAmerica = [
|
||||
{
|
||||
id: "001",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "002",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "003",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "004",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "005",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "006",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "007",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "008",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "009",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "010",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "011",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "012",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "013",
|
||||
value: ".82",
|
||||
},
|
||||
];
|
||||
|
||||
export const dataSetForAsia = [
|
||||
{
|
||||
id: "001",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "002",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "003",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "004",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "005",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "006",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "007",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "008",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "009",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "010",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "011",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "012",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "013",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "014",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "015",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "016",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "017",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "018",
|
||||
value: "1.30",
|
||||
},
|
||||
|
||||
{
|
||||
id: "019",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "020",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "021",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "022",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "023",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "024",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "025",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "026",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "027",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "028",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "029",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "030",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "031",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "032",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "033",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "034",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "035",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "036",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "037",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "038",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "039",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "040",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "041",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "042",
|
||||
value: "1.30",
|
||||
},
|
||||
|
||||
{
|
||||
id: "043",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "044",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "045",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "046",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "047",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "048",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "049",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "050",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "051",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "052",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "053",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "054",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "055",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "056",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "057",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "058",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "059",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "060",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "061",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "062",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "063",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "064",
|
||||
value: "2.58",
|
||||
},
|
||||
];
|
||||
|
||||
export const dataSetForOceania = [
|
||||
{
|
||||
id: "001",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "002",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "003",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "004",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "005",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "006",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "007",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "008",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "009",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "010",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "011",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "012",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "013",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "014",
|
||||
value: "2.04",
|
||||
},
|
||||
];
|
||||
|
||||
export const dataSetForAfrica = [
|
||||
{
|
||||
id: "001",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "002",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "003",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "004",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "005",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "006",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "007",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "008",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "009",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "010",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "011",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "012",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "013",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "014",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "015",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "016",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "017",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "018",
|
||||
value: "1.30",
|
||||
},
|
||||
|
||||
{
|
||||
id: "019",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "020",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "021",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "022",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "023",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "024",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "025",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "026",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "027",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "028",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "029",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "030",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "031",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "032",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "033",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "034",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "035",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "036",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "037",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "038",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "039",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "040",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "041",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "042",
|
||||
value: "1.30",
|
||||
},
|
||||
|
||||
{
|
||||
id: "043",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "044",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "045",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "046",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "047",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "048",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "049",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "050",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "051",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "052",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "053",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "054",
|
||||
value: ".82",
|
||||
},
|
||||
{
|
||||
id: "055",
|
||||
value: "2.04",
|
||||
},
|
||||
{
|
||||
id: "056",
|
||||
value: "1.78",
|
||||
},
|
||||
{
|
||||
id: "057",
|
||||
value: ".40",
|
||||
},
|
||||
{
|
||||
id: "058",
|
||||
value: "2.58",
|
||||
},
|
||||
{
|
||||
id: "059",
|
||||
value: "1.30",
|
||||
},
|
||||
{
|
||||
id: "060",
|
||||
value: ".82",
|
||||
},
|
||||
];
|
||||
6
app/client/src/widgets/MapChartWidget/icon.svg
Executable file
6
app/client/src/widgets/MapChartWidget/icon.svg
Executable file
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.50001 11.8034V18.5L14.5 21V11.55L12 15C11.3917 14.2179 10.4119 12.9626 9.50001 11.8034Z" fill="#4B4848"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 10.17V21L20.5 18V6L17 8.1L15.5 10.17Z" fill="#4B4848"/>
|
||||
<path d="M3.5 9V21L8.5 18V10.5374C8.5 10.5374 7.83441 9.63336 7.5 9C7.12002 8.28033 6.72229 7.06662 6.72229 7.06662L3.5 9Z" fill="#4B4848"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.1559 9.87818C8.30481 8.73014 7.6 7.67255 7.6 6.35454C7.6 3.95998 9.56392 2.01104 11.9821 2H12.0032C14.431 2 16.4065 3.95362 16.4065 6.35454C16.4065 7.67255 15.7017 8.73038 14.8506 9.87818C14.8506 9.87818 12.1182 13.3703 12.0069 13.5208L9.1559 9.87818Z" fill="#4B4848"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 835 B |
46
app/client/src/widgets/MapChartWidget/index.ts
Normal file
46
app/client/src/widgets/MapChartWidget/index.ts
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import Widget from "./widget";
|
||||
import IconSVG from "./icon.svg";
|
||||
import { dataSetForWorld, MapTypes } from "./constants";
|
||||
|
||||
export const CONFIG = {
|
||||
type: Widget.getWidgetType(),
|
||||
name: "Map Chart", // The display name which will be made in uppercase and show in the widgets panel ( can have spaces )
|
||||
iconSVG: IconSVG,
|
||||
needsMeta: true, // Defines if this widget adds any meta properties
|
||||
isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
|
||||
defaults: {
|
||||
rows: 32,
|
||||
columns: 24,
|
||||
widgetName: "MapChart",
|
||||
version: 1,
|
||||
mapType: MapTypes.WORLD,
|
||||
mapTitle: "Global Population",
|
||||
showLabels: true,
|
||||
data: dataSetForWorld,
|
||||
colorRange: [
|
||||
{
|
||||
minValue: 0.5,
|
||||
maxValue: 1.0,
|
||||
code: "#FFD74D",
|
||||
},
|
||||
{
|
||||
minValue: 1.0,
|
||||
maxValue: 2.0,
|
||||
code: "#FB8C00",
|
||||
},
|
||||
{
|
||||
minValue: 2.0,
|
||||
maxValue: 3.0,
|
||||
code: "#E65100",
|
||||
},
|
||||
],
|
||||
},
|
||||
properties: {
|
||||
derived: Widget.getDerivedPropertiesMap(),
|
||||
default: Widget.getDefaultPropertiesMap(),
|
||||
meta: Widget.getMetaPropertiesMap(),
|
||||
config: Widget.getPropertyPaneConfig(),
|
||||
},
|
||||
};
|
||||
|
||||
export default Widget;
|
||||
341
app/client/src/widgets/MapChartWidget/widget/index.tsx
Normal file
341
app/client/src/widgets/MapChartWidget/widget/index.tsx
Normal file
|
|
@ -0,0 +1,341 @@
|
|||
import React, { lazy, Suspense } from "react";
|
||||
|
||||
import BaseWidget, { WidgetProps, WidgetState } from "widgets/BaseWidget";
|
||||
import { WidgetType } from "constants/WidgetConstants";
|
||||
import Skeleton from "components/utils/Skeleton";
|
||||
import { retryPromise } from "utils/AppsmithUtils";
|
||||
import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
|
||||
import { ValidationTypes } from "constants/WidgetValidation";
|
||||
import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
|
||||
import {
|
||||
dataSetForAfrica,
|
||||
dataSetForAsia,
|
||||
dataSetForEurope,
|
||||
dataSetForNorthAmerica,
|
||||
dataSetForOceania,
|
||||
dataSetForSouthAmerica,
|
||||
dataSetForWorld,
|
||||
dataSetForWorldWithAntarctica,
|
||||
MapColorObject,
|
||||
MapTypes,
|
||||
} from "../constants";
|
||||
import { MapType } from "../component";
|
||||
import { AutocompleteDataType } from "utils/autocomplete/TernServer";
|
||||
|
||||
const MapChartComponent = lazy(() =>
|
||||
retryPromise(() =>
|
||||
import(/* webpackChunkName: "mapCharts" */ "../component"),
|
||||
),
|
||||
);
|
||||
|
||||
const dataSetMapping: Record<MapType, any> = {
|
||||
[MapTypes.WORLD]: dataSetForWorld,
|
||||
[MapTypes.WORLD_WITH_ANTARCTICA]: dataSetForWorldWithAntarctica,
|
||||
[MapTypes.EUROPE]: dataSetForEurope,
|
||||
[MapTypes.NORTH_AMERICA]: dataSetForNorthAmerica,
|
||||
[MapTypes.SOURTH_AMERICA]: dataSetForSouthAmerica,
|
||||
[MapTypes.ASIA]: dataSetForAsia,
|
||||
[MapTypes.OCEANIA]: dataSetForOceania,
|
||||
[MapTypes.AFRICA]: dataSetForAfrica,
|
||||
};
|
||||
|
||||
// A hook to update the corresponding dataset when map type is changed
|
||||
const updateDataSet = (
|
||||
props: MapChartWidgetProps,
|
||||
propertyPath: string,
|
||||
propertyValue: MapType,
|
||||
) => {
|
||||
const propertiesToUpdate = [
|
||||
{ propertyPath, propertyValue },
|
||||
{
|
||||
propertyPath: "data",
|
||||
propertyValue: dataSetMapping[propertyValue],
|
||||
},
|
||||
];
|
||||
|
||||
return propertiesToUpdate;
|
||||
};
|
||||
|
||||
class MapChartWidget extends BaseWidget<MapChartWidgetProps, WidgetState> {
|
||||
static getPropertyPaneConfig() {
|
||||
return [
|
||||
{
|
||||
sectionName: "General",
|
||||
children: [
|
||||
{
|
||||
helpText: "Sets the map type",
|
||||
propertyName: "mapType",
|
||||
label: "Map Type",
|
||||
controlType: "DROP_DOWN",
|
||||
options: [
|
||||
{
|
||||
label: "World",
|
||||
value: MapTypes.WORLD,
|
||||
},
|
||||
{
|
||||
label: "World with Antarctica",
|
||||
value: MapTypes.WORLD_WITH_ANTARCTICA,
|
||||
},
|
||||
{
|
||||
label: "Europe",
|
||||
value: MapTypes.EUROPE,
|
||||
},
|
||||
{
|
||||
label: "North America",
|
||||
value: MapTypes.NORTH_AMERICA,
|
||||
},
|
||||
{
|
||||
label: "South America",
|
||||
value: MapTypes.SOURTH_AMERICA,
|
||||
},
|
||||
{
|
||||
label: "Asia",
|
||||
value: MapTypes.ASIA,
|
||||
},
|
||||
{
|
||||
label: "Oceania",
|
||||
value: MapTypes.OCEANIA,
|
||||
},
|
||||
{
|
||||
label: "Africa",
|
||||
value: MapTypes.AFRICA,
|
||||
},
|
||||
],
|
||||
isJSconvertible: true,
|
||||
isBindProperty: true,
|
||||
isTriggerProperty: false,
|
||||
updateHook: updateDataSet,
|
||||
validation: {
|
||||
type: ValidationTypes.TEXT,
|
||||
params: {
|
||||
allowedValues: [
|
||||
MapTypes.WORLD,
|
||||
MapTypes.WORLD_WITH_ANTARCTICA,
|
||||
MapTypes.EUROPE,
|
||||
MapTypes.NORTH_AMERICA,
|
||||
MapTypes.SOURTH_AMERICA,
|
||||
MapTypes.ASIA,
|
||||
MapTypes.OCEANIA,
|
||||
MapTypes.AFRICA,
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
helpText: "Sets the map title",
|
||||
placeholderText: "Enter title",
|
||||
propertyName: "mapTitle",
|
||||
label: "Title",
|
||||
controlType: "INPUT_TEXT",
|
||||
isBindProperty: true,
|
||||
isTriggerProperty: false,
|
||||
validation: { type: ValidationTypes.TEXT },
|
||||
},
|
||||
{
|
||||
propertyName: "isVisible",
|
||||
label: "Visible",
|
||||
helpText: "Controls the visibility of the widget",
|
||||
controlType: "SWITCH",
|
||||
isJSConvertible: true,
|
||||
isBindProperty: true,
|
||||
isTriggerProperty: false,
|
||||
validation: { type: ValidationTypes.BOOLEAN },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionName: "Map Chart Data",
|
||||
children: [
|
||||
{
|
||||
helpText: "Populates the map with the data",
|
||||
propertyName: "data",
|
||||
label: "Data",
|
||||
controlType: "INPUT_TEXT",
|
||||
isBindProperty: true,
|
||||
isTriggerProperty: false,
|
||||
validation: {
|
||||
type: ValidationTypes.ARRAY,
|
||||
params: {
|
||||
unique: true,
|
||||
children: {
|
||||
type: ValidationTypes.OBJECT,
|
||||
params: {
|
||||
required: true,
|
||||
allowedKeys: [
|
||||
{
|
||||
name: "id",
|
||||
type: ValidationTypes.TEXT,
|
||||
params: {
|
||||
unique: true,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "value",
|
||||
type: ValidationTypes.TEXT,
|
||||
params: {
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
evaluationSubstitutionType:
|
||||
EvaluationSubstitutionType.SMART_SUBSTITUTE,
|
||||
},
|
||||
{
|
||||
propertyName: "showLabels",
|
||||
label: "Show Labels",
|
||||
helpText: "Sets whether entity labels will be shown or hidden",
|
||||
controlType: "SWITCH",
|
||||
isJSConvertible: true,
|
||||
isBindProperty: true,
|
||||
isTriggerProperty: false,
|
||||
validation: { type: ValidationTypes.BOOLEAN },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionName: "Styles",
|
||||
children: [
|
||||
{
|
||||
helpText:
|
||||
"Defines ranges for categorizing entities on a map based on their data values.",
|
||||
propertyName: "colorRange",
|
||||
label: "Color Range",
|
||||
controlType: "INPUT_TEXT",
|
||||
placeholderText: "Color range object",
|
||||
isBindProperty: true,
|
||||
isTriggerProperty: false,
|
||||
validation: {
|
||||
type: ValidationTypes.ARRAY,
|
||||
params: {
|
||||
unique: true,
|
||||
children: {
|
||||
type: ValidationTypes.OBJECT,
|
||||
params: {
|
||||
allowedKeys: [
|
||||
{
|
||||
name: "minValue",
|
||||
type: ValidationTypes.NUMBER,
|
||||
params: {
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "maxValue",
|
||||
type: ValidationTypes.NUMBER,
|
||||
params: {
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "displayValue",
|
||||
type: ValidationTypes.TEXT,
|
||||
},
|
||||
{
|
||||
name: "code",
|
||||
type: ValidationTypes.TEXT,
|
||||
params: {
|
||||
expected: {
|
||||
type: "Hex color (6-digit)",
|
||||
example: "#FF04D7",
|
||||
autocompleteDataType: AutocompleteDataType.STRING,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "alpha",
|
||||
type: ValidationTypes.NUMBER,
|
||||
params: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
evaluationSubstitutionType:
|
||||
EvaluationSubstitutionType.SMART_SUBSTITUTE,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionName: "Actions",
|
||||
children: [
|
||||
{
|
||||
helpText:
|
||||
"Triggers an action when the map chart data point is clicked",
|
||||
propertyName: "onDataPointClick",
|
||||
label: "onDataPointClick",
|
||||
controlType: "ACTION_SELECTOR",
|
||||
isJSConvertible: true,
|
||||
isBindProperty: true,
|
||||
isTriggerProperty: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
static getMetaPropertiesMap(): Record<string, any> {
|
||||
return {
|
||||
selectedDataPoint: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
static getWidgetType(): WidgetType {
|
||||
return "MAP_CHART_WIDGET";
|
||||
}
|
||||
|
||||
handleDataPointClick = (evt: any) => {
|
||||
const { onDataPointClick } = this.props;
|
||||
|
||||
this.props.updateWidgetMetaProperty("selectedDataPoint", evt.data, {
|
||||
triggerPropertyName: "onDataPointClick",
|
||||
dynamicString: onDataPointClick,
|
||||
event: {
|
||||
type: EventType.ON_DATA_POINT_CLICK,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
getPageView() {
|
||||
const {
|
||||
colorRange,
|
||||
data,
|
||||
isVisible,
|
||||
mapTitle,
|
||||
mapType,
|
||||
showLabels,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Suspense fallback={<Skeleton />}>
|
||||
<MapChartComponent
|
||||
caption={mapTitle}
|
||||
colorRange={colorRange}
|
||||
data={data}
|
||||
isVisible={isVisible}
|
||||
onDataPointClick={this.handleDataPointClick}
|
||||
showLabels={showLabels}
|
||||
type={mapType}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export interface MapChartWidgetProps extends WidgetProps {
|
||||
mapTitle?: string;
|
||||
mapType: MapType;
|
||||
onDataPointClick?: string;
|
||||
showLabels: boolean;
|
||||
colorRange: MapColorObject[];
|
||||
}
|
||||
|
||||
export default MapChartWidget;
|
||||
|
|
@ -1879,6 +1879,11 @@
|
|||
minimatch "^3.0.4"
|
||||
strip-json-comments "^3.1.1"
|
||||
|
||||
"@fusioncharts/accessibility@^1.5.0":
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@fusioncharts/accessibility/-/accessibility-1.5.0.tgz#542ae397f0957e2dc7cf5850ce5045d9aed93803"
|
||||
integrity sha512-4O0DmNR8D0WL5KYx6b9V/N0H24cmPseICPstXvkLpxjFuzsZz5BoS3IEiCf/KjVe3kGmUFDa6Q4Hz5v9pLi1wg==
|
||||
|
||||
"@fusioncharts/charts@^3.16.0":
|
||||
version "3.16.0"
|
||||
resolved "https://registry.npmjs.org/@fusioncharts/charts/-/charts-3.16.0.tgz"
|
||||
|
|
@ -1888,13 +1893,24 @@
|
|||
"@fusioncharts/features" "^1.2.0"
|
||||
"@fusioncharts/utils" "^1.2.0"
|
||||
|
||||
"@fusioncharts/constructor@^1.2.0":
|
||||
version "1.2.0"
|
||||
resolved "https://registry.npmjs.org/@fusioncharts/constructor/-/constructor-1.2.0.tgz"
|
||||
"@fusioncharts/charts@^3.18.0":
|
||||
version "3.18.0"
|
||||
resolved "https://registry.yarnpkg.com/@fusioncharts/charts/-/charts-3.18.0.tgz#6c52c80bc3c9af65111270faa3a2c1e8db06f64e"
|
||||
integrity sha512-WsNQTUKWVPxYUkxUHdxodvGsJF/vFSwm/zYVbQj2WGpA74B3hAETw8lKrqk943loImoPdB2c4JsnaNE1XmkpyQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
"@fusioncharts/core" "^1.2.0"
|
||||
"@fusioncharts/maps" "^3.16.0"
|
||||
"@fusioncharts/core" "^1.5.0"
|
||||
"@fusioncharts/features" "^1.5.0"
|
||||
"@fusioncharts/utils" "^1.5.0"
|
||||
|
||||
"@fusioncharts/constructor@^1.5.0":
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@fusioncharts/constructor/-/constructor-1.5.0.tgz#8781ad22f9ea7c2d28cd706c13b9e6872ff663a7"
|
||||
integrity sha512-oIWGtLhRjllZDsKXHDahegaUOP6uC26UT9EHHQ+W7tL9v7xxZMM1bPMg79eOg/l4ZBoc/G/YJkEEfO5tMXiDSA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
"@fusioncharts/core" "^1.5.0"
|
||||
"@fusioncharts/maps" "^3.18.0"
|
||||
|
||||
"@fusioncharts/core@^1.2.0":
|
||||
version "1.2.0"
|
||||
|
|
@ -1905,12 +1921,23 @@
|
|||
core-js "^3.0.1"
|
||||
ramda "^0.25.0"
|
||||
|
||||
"@fusioncharts/datatable@^1.2.0":
|
||||
version "1.2.0"
|
||||
resolved "https://registry.npmjs.org/@fusioncharts/datatable/-/datatable-1.2.0.tgz"
|
||||
"@fusioncharts/core@^1.5.0":
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@fusioncharts/core/-/core-1.5.0.tgz#a260bbd204fc8af715c3169df071003cca00765c"
|
||||
integrity sha512-3JT9U0BtVBHMkgUfFH0aCfoZkxPFaWyTa7dLnFEvYF255d2hdnyd3B/ZWYrEK1sQ679bMjvs4q6pMsnbNEuDqw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
"@fusioncharts/utils" "^1.2.0"
|
||||
"@fusioncharts/utils" "^1.5.0"
|
||||
core-js "^3.0.1"
|
||||
ramda "^0.25.0"
|
||||
|
||||
"@fusioncharts/datatable@^1.5.0":
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@fusioncharts/datatable/-/datatable-1.5.0.tgz#397f845ddcc8f502948b9a162ac94a0a4b4943ce"
|
||||
integrity sha512-BRxgfEAXNAr8TZToNinLjBNeTmR4MqC2ao16rTZclhIQPxtR4KkHrjTR1dMYr6tsxXQnpCmsjkV+ibssn/dDlw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
"@fusioncharts/utils" "^1.5.0"
|
||||
|
||||
"@fusioncharts/features@^1.2.0":
|
||||
version "1.2.0"
|
||||
|
|
@ -1920,25 +1947,36 @@
|
|||
"@fusioncharts/core" "^1.2.0"
|
||||
"@fusioncharts/utils" "^1.2.0"
|
||||
|
||||
"@fusioncharts/fusiontime@^2.4.0":
|
||||
version "2.4.0"
|
||||
resolved "https://registry.npmjs.org/@fusioncharts/fusiontime/-/fusiontime-2.4.0.tgz"
|
||||
"@fusioncharts/features@^1.5.0":
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@fusioncharts/features/-/features-1.5.0.tgz#cf919260b3fed272fddc4967d7e64a53c077081d"
|
||||
integrity sha512-p6nxoAJFzXEeYQHgKRQI5/ciwXLb8L60faHqre6vDABUKDvPMicI9tR7yNR7AWWmvBDxhkzXOV2v2sqWCNWRFw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
"@fusioncharts/charts" "^3.16.0"
|
||||
"@fusioncharts/core" "^1.2.0"
|
||||
"@fusioncharts/datatable" "^1.2.0"
|
||||
"@fusioncharts/utils" "^1.2.0"
|
||||
"@fusioncharts/core" "^1.5.0"
|
||||
"@fusioncharts/utils" "^1.5.0"
|
||||
|
||||
"@fusioncharts/fusiontime@^2.6.0":
|
||||
version "2.6.0"
|
||||
resolved "https://registry.yarnpkg.com/@fusioncharts/fusiontime/-/fusiontime-2.6.0.tgz#8d7a6aab6561c7e63c44bda7218c62adea228f0c"
|
||||
integrity sha512-un9g122BkPToSUFehD5AHluyv/gOL1TiDSp0kdO42IgtsX1UwJh3X3JVhkMagggICCKl/AM+dyuu5ids9yDN2w==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
"@fusioncharts/charts" "^3.18.0"
|
||||
"@fusioncharts/core" "^1.5.0"
|
||||
"@fusioncharts/datatable" "^1.5.0"
|
||||
"@fusioncharts/utils" "^1.5.0"
|
||||
ramda "^0.25.0"
|
||||
|
||||
"@fusioncharts/maps@^3.16.0":
|
||||
version "3.16.0"
|
||||
resolved "https://registry.npmjs.org/@fusioncharts/maps/-/maps-3.16.0.tgz"
|
||||
"@fusioncharts/maps@^3.18.0":
|
||||
version "3.18.0"
|
||||
resolved "https://registry.yarnpkg.com/@fusioncharts/maps/-/maps-3.18.0.tgz#46002bd70ee73c0085392cb4e109938b38e55c5f"
|
||||
integrity sha512-ElzPX1fAWbT8wJuvdDFVfJHRCKRxy3Ub/B22upt8la7RuKSIfDMRRwFF7IWxrW5opJDxJY1IQNwjZVTnm0NuFA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
"@fusioncharts/charts" "^3.16.0"
|
||||
"@fusioncharts/core" "^1.2.0"
|
||||
"@fusioncharts/features" "^1.2.0"
|
||||
"@fusioncharts/charts" "^3.18.0"
|
||||
"@fusioncharts/core" "^1.5.0"
|
||||
"@fusioncharts/features" "^1.5.0"
|
||||
|
||||
"@fusioncharts/powercharts@^3.16.0":
|
||||
version "3.16.0"
|
||||
|
|
@ -1949,6 +1987,16 @@
|
|||
"@fusioncharts/core" "^1.2.0"
|
||||
"@fusioncharts/utils" "^1.2.0"
|
||||
|
||||
"@fusioncharts/powercharts@^3.18.0":
|
||||
version "3.18.0"
|
||||
resolved "https://registry.yarnpkg.com/@fusioncharts/powercharts/-/powercharts-3.18.0.tgz#ad54b12b3be3e754930b3aa3f093d06f99b4acef"
|
||||
integrity sha512-z0q3ssKvzEyIl/C1IPCmPcPZ0X+Q4ntPAP8B/xe+E1mTXd5AYVFI2fGqXHlUCUgHvr9MYNRpjYzwIOa3YEK38Q==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
"@fusioncharts/charts" "^3.18.0"
|
||||
"@fusioncharts/core" "^1.5.0"
|
||||
"@fusioncharts/utils" "^1.5.0"
|
||||
|
||||
"@fusioncharts/utils@^1.2.0":
|
||||
version "1.2.0"
|
||||
resolved "https://registry.npmjs.org/@fusioncharts/utils/-/utils-1.2.0.tgz"
|
||||
|
|
@ -1956,16 +2004,25 @@
|
|||
"@babel/runtime" "^7.9.2"
|
||||
ramda "^0.25.0"
|
||||
|
||||
"@fusioncharts/widgets@^3.16.0":
|
||||
version "3.16.0"
|
||||
resolved "https://registry.npmjs.org/@fusioncharts/widgets/-/widgets-3.16.0.tgz"
|
||||
"@fusioncharts/utils@^1.5.0":
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@fusioncharts/utils/-/utils-1.5.0.tgz#9a3d2701f7eb5445ed26d3c21e423ff958ed8314"
|
||||
integrity sha512-faUHPGO29jiP/RvfCXxl57snWUm7+8RHbU/0x3BAQN8wq6U7bylj8rWKmu1flFrq8vH6Kup0eR07meJzNvNaBw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
"@fusioncharts/charts" "^3.16.0"
|
||||
"@fusioncharts/constructor" "^1.2.0"
|
||||
"@fusioncharts/core" "^1.2.0"
|
||||
"@fusioncharts/features" "^1.2.0"
|
||||
"@fusioncharts/utils" "^1.2.0"
|
||||
ramda "^0.25.0"
|
||||
|
||||
"@fusioncharts/widgets@^3.18.0":
|
||||
version "3.18.0"
|
||||
resolved "https://registry.yarnpkg.com/@fusioncharts/widgets/-/widgets-3.18.0.tgz#c967a3402e20259357fb35925686fddd991e4c11"
|
||||
integrity sha512-FphluEdI3EYW9ERYKgfzJyAu4ipw8RJA+eJgjoAqB6dodK4SafTY5YpwyeG5V1VnIKrjFmrfk5iw3jOiFLYk5Q==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
"@fusioncharts/charts" "^3.18.0"
|
||||
"@fusioncharts/constructor" "^1.5.0"
|
||||
"@fusioncharts/core" "^1.5.0"
|
||||
"@fusioncharts/features" "^1.5.0"
|
||||
"@fusioncharts/utils" "^1.5.0"
|
||||
|
||||
"@github/g-emoji-element@^1.1.5":
|
||||
version "1.1.5"
|
||||
|
|
@ -3001,8 +3058,9 @@
|
|||
resolved "https://registry.npmjs.org/@types/node/-/node-10.17.39.tgz"
|
||||
|
||||
"@types/node@^14.14.31":
|
||||
version "14.17.12"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.12.tgz#7a31f720b85a617e54e42d24c4ace136601656c7"
|
||||
version "14.17.14"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.14.tgz#6fda9785b41570eb628bac27be4b602769a3f938"
|
||||
integrity sha512-rsAj2u8Xkqfc332iXV12SqIsjVi07H479bOP4q94NAcjzmAvapumEhuVIt53koEf7JFrpjgNKjBga5Pnn/GL8A==
|
||||
|
||||
"@types/normalize-package-data@^2.4.0":
|
||||
version "2.4.0"
|
||||
|
|
@ -8116,21 +8174,43 @@ fuse.js@^3.4.5:
|
|||
version "3.6.1"
|
||||
resolved "https://registry.npmjs.org/fuse.js/-/fuse.js-3.6.1.tgz"
|
||||
|
||||
fusioncharts@^3.16.0:
|
||||
version "3.16.0"
|
||||
resolved "https://registry.npmjs.org/fusioncharts/-/fusioncharts-3.16.0.tgz"
|
||||
fusioncharts@^3.18.0:
|
||||
version "3.18.0"
|
||||
resolved "https://registry.yarnpkg.com/fusioncharts/-/fusioncharts-3.18.0.tgz#c3fa552f69fa3d396a746fd6f6f813ebecbd5f1e"
|
||||
integrity sha512-PmBNI8RIDHT+xwm3mSquusnLEpKWNDyvyBkMqkMbTuYEHmGVnRmrwQDw8VutIBE+/vyLmfuZ+Ptlg7RiFMrE7w==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
"@fusioncharts/charts" "^3.16.0"
|
||||
"@fusioncharts/constructor" "^1.2.0"
|
||||
"@fusioncharts/core" "^1.2.0"
|
||||
"@fusioncharts/datatable" "^1.2.0"
|
||||
"@fusioncharts/features" "^1.2.0"
|
||||
"@fusioncharts/fusiontime" "^2.4.0"
|
||||
"@fusioncharts/maps" "^3.16.0"
|
||||
"@fusioncharts/powercharts" "^3.16.0"
|
||||
"@fusioncharts/utils" "^1.2.0"
|
||||
"@fusioncharts/widgets" "^3.16.0"
|
||||
"@fusioncharts/accessibility" "^1.5.0"
|
||||
"@fusioncharts/charts" "^3.18.0"
|
||||
"@fusioncharts/constructor" "^1.5.0"
|
||||
"@fusioncharts/core" "^1.5.0"
|
||||
"@fusioncharts/datatable" "^1.5.0"
|
||||
"@fusioncharts/features" "^1.5.0"
|
||||
"@fusioncharts/fusiontime" "^2.6.0"
|
||||
"@fusioncharts/maps" "^3.18.0"
|
||||
"@fusioncharts/powercharts" "^3.18.0"
|
||||
"@fusioncharts/utils" "^1.5.0"
|
||||
"@fusioncharts/widgets" "^3.18.0"
|
||||
mutationobserver-shim "^0.3.5"
|
||||
promise-polyfill "^8.1.3"
|
||||
|
||||
fusionmaps@^3.18.0:
|
||||
version "3.18.0"
|
||||
resolved "https://registry.yarnpkg.com/fusionmaps/-/fusionmaps-3.18.0.tgz#46556cd3925f0590eba14dc7ae137b9e7c53265f"
|
||||
integrity sha512-vOOubfGVY3fIf6ub3wVedrIgb9wBZu+VHp/lkL4gWtaYWwBDitu2EdYfQSOLJqHEz75XuvBM+RyZlIouVfEjZA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
"@fusioncharts/accessibility" "^1.5.0"
|
||||
"@fusioncharts/charts" "^3.18.0"
|
||||
"@fusioncharts/constructor" "^1.5.0"
|
||||
"@fusioncharts/core" "^1.5.0"
|
||||
"@fusioncharts/datatable" "^1.5.0"
|
||||
"@fusioncharts/features" "^1.5.0"
|
||||
"@fusioncharts/fusiontime" "^2.6.0"
|
||||
"@fusioncharts/maps" "^3.18.0"
|
||||
"@fusioncharts/powercharts" "^3.18.0"
|
||||
"@fusioncharts/utils" "^1.5.0"
|
||||
"@fusioncharts/widgets" "^3.18.0"
|
||||
mutationobserver-shim "^0.3.5"
|
||||
promise-polyfill "^8.1.3"
|
||||
|
||||
|
|
@ -10454,8 +10534,9 @@ listr-verbose-renderer@^0.5.0:
|
|||
figures "^2.0.0"
|
||||
|
||||
listr2@^3.8.3:
|
||||
version "3.11.0"
|
||||
resolved "https://registry.yarnpkg.com/listr2/-/listr2-3.11.0.tgz#9771b02407875aa78e73d6e0ff6541bbec0aaee9"
|
||||
version "3.11.1"
|
||||
resolved "https://registry.yarnpkg.com/listr2/-/listr2-3.11.1.tgz#a9bab5cd5874fd3cb7827118dbea6fedefbcb43f"
|
||||
integrity sha512-ZXQvQfmH9iWLlb4n3hh31yicXDxlzB0pE7MM1zu6kgbVL4ivEsO4H8IPh4E682sC8RjnYO9anose+zT52rrpyg==
|
||||
dependencies:
|
||||
cli-truncate "^2.1.0"
|
||||
colorette "^1.2.2"
|
||||
|
|
@ -13700,6 +13781,13 @@ react-full-screen@^1.1.0:
|
|||
dependencies:
|
||||
fscreen "^1.0.2"
|
||||
|
||||
react-fusioncharts@^3.1.2:
|
||||
version "3.1.2"
|
||||
resolved "https://registry.yarnpkg.com/react-fusioncharts/-/react-fusioncharts-3.1.2.tgz#add3f23e1ca819f1d6f9b58547cfcb85b50c6972"
|
||||
integrity sha512-ilmR7gfUJL5yed0soSHKlBpq2qCPyWiSc7gyFlT2vbPQS8eN6fAWMmLHy8H2kFP/XELItoAMqgUXyrjgK82bXA==
|
||||
dependencies:
|
||||
uuid "^3.2.1"
|
||||
|
||||
react-google-maps@^9.4.5:
|
||||
version "9.4.5"
|
||||
resolved "https://registry.npmjs.org/react-google-maps/-/react-google-maps-9.4.5.tgz"
|
||||
|
|
@ -16497,7 +16585,7 @@ utils-merge@1.0.1:
|
|||
version "1.0.1"
|
||||
resolved "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz"
|
||||
|
||||
uuid@^3.1.0, uuid@^3.3.2, uuid@^3.4.0:
|
||||
uuid@^3.1.0, uuid@^3.2.1, uuid@^3.3.2, uuid@^3.4.0:
|
||||
version "3.4.0"
|
||||
resolved "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user