This project is the GeoChart Component (not to be confused with the GeoView GeoChart Plugin).
IMPORTANT: This component uses react-chart-js which also has a react dependency. For compatibility reasons:
-
The webpack.common.js file has property to exclude react and react-dom from the packages
-
cgpv-main.js in the index.html file is referenced via the github url hostname (not the localhost, nor 127.0.0.1, nor an url tricked via the hosts file, etc) - any of those may result in react hook issues.
The viewer is being loaded in public/index.html as a script tag
<script src="https://canadian-geospatial-platform.github.io/geoview/public/cgpv-main.js"></script>Developpers can import this project from their package.json directly and then import the Chart component. There are 3 essential props for this component: inputs, data and options.
inputsis the main one and accepts an elaborate configuration json detailed below;datais the equivalent of the ChartJSdataprops, to bypass theinputsand play with ChartJS directly;optionsis the equivalent of the ChartJSoptionsprops, to bypass theinputsprops and play with ChartJS directly;
To read details on the schame of an inputs configuration json, see: https://github.com/Canadian-Geospatial-Platform/geochart/blob/develop/schema-inputs.json
{
"chart": "line",
"title": "Line Chart with time on x and sliders",
"query": {
"type": "esriRegular",
"url": "https://maps-cartes.services.geo.ca/server_serveur/rest/services/HC/airborne_radioactivity_en/MapServer/3",
"queryOptions": {
"whereClauses": [
{
"field": "Location_Emplacement",
"prefix": "'",
"valueFrom": "Location_Emplacement",
"suffix": "'"
}
],
"orderByField": "CollectionStart_DebutPrelevement"
}
},
"geochart": {
"borderWidth": 2,
"xAxis": {
"type": "time",
"timeFormat": {
"en": "MMM dd, yyyy, HH:mm",
"fr": "d MMM yyyy, HH:mm"
},
"timeIANA": "America/Toronto",
"ticksRule": "auto",
"property": "CollectionStart_DebutPrelevement",
"label": "Collected date"
},
"yAxis": {
"type": "linear",
"property": "Activity_Activite_mBqm3",
"label": "Activity mBqm3",
"tooltipSuffix": "mBqm3"
}
},
"category": {
"property": "Radionuclide_Radionucleide"
},
"ui": {
"xSlider": {
"display": true
},
"ySlider": {
"display": true,
"step": 0.1
},
"stepsSwitcher": true,
"scalesSwitcher": true,
"resetStates": true,
"description": "This is a description text",
"download": true
},
"datasources": [
{
"display": "Ottawa",
"sourceItem": {
"Location_Emplacement": "Ottawa"
}
},
{
"display": "Montreal",
"sourceItem": {
"Location_Emplacement": "Montreal"
}
},
{
"display": "Quebec",
"sourceItem": {
"Location_Emplacement": "Quebec"
}
}
]
}
$ git clone https://github.com/Canadian-Geospatial-Platform/geochart.git
cd geochart
$ npm install
$ npm run build
$ npm run serve