Skip to content

Commit

Permalink
Build: (62b1611) Merge pull request #79 from Alex-NRCan/fix-data-nulls
Browse files Browse the repository at this point in the history 
fix(nulls) - Schema validator now supporting nulls in y values
  • Loading branch information
@jolevesq
jolevesq committed Sep 13, 2024
1 parent 86aab32 commit 7f54a7b
Show file tree
Hide file tree
Showing 2 changed files with 1,269 additions and 1,814 deletions.
56 changes: 55 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -611,6 +611,60 @@
}]
};

const DATA_INPUT_6 = {
"chart": "line",
"title": "Line Chart with time on x and sliders",
"query": {
"type": "esriRegular",
"url": "https://services1.arcgis.com/HsjBaDykC1mjhXz9/ArcGIS/rest/services/CRMN___Tritium_in_Atmospheric_Water_Vapour_WFL1/FeatureServer/3",
"queryOptions": {
"whereClauses": [
{
"field": "Station",
"prefix": "'",
"valueFrom": "Station",
"suffix": "'"
}
],
"orderByField": "Date"
}
},
"geochart": {
"xAxis": {
"type": "time",
"property": "Date",
"label": "Collected date"
},
"yAxis": {
"type": "linear",
"property": "Activity_Activite_Bqm3",
"label": "Activity (mBqm3)",
"tooltipSuffix": "mBqm3"
},
"borderWidth": 1
},
"ui": {
"xSlider": {
"display": true
},
"ySlider": {
"display": true
},
"stepsSwitcher": true,
"resetStates": true,
"description": "This is an ArcGIS Online layer chart",
"download": true
},
"datasources": [
{
"display": "GE7",
"sourceItem": {
"Station": "GE7"
}
}
]
};

const OPTIONS_NATIVE_1 = {
responsive: true,
plugins: {
Expand Down Expand Up @@ -707,7 +761,7 @@
datasets: [{
data: [{"x": 10, "y": 15}, {"x": 15, "y": 25}, {"x": 20, "y": 10}]
}]
};</script><script defer="defer" src="main.js"></script></head><body><div style="text-align: center; height: 440px;"><div style="display:inline-block; background-color: lightgreen; width: 49%; height: 100%; vertical-align:top;"><div style="text-align: left;">GEOCHART INPUTS <span style="font-size: small;">(these parameters will be parsed and sent to the Chart.js props on the right and GeoChart created below)</span></div><div><span>Language: </span><select id="lang" onchange="languageChanged()"><option selected="selected" value="en">English</option><option value="fr">Français</option></select></div><div><div><button onclick="importDataInputs(DATA_INPUT_LINE_1)">Import Chart w/ time w/steps</button> <button onclick="importDataInputs(DATA_INPUT_LINE_2)">Import Chart w/ time logar. w/tension</button> <button onclick="importDataInputs(DATA_INPUT_LINE_2_SLIM)">Import Chart slim</button> <button onclick="importDataInputs(DATA_INPUT_LINE_3)">Imp. OGC Line</button> <button onclick="importDataInputs(DATA_INPUT_BAR_3)">Imp. OGC Bar</button><br/><button onclick="importDataInputs(DATA_INPUT_2)">Import Data BAR</button> <button onclick="importDataInputs(DATA_INPUT_3)">Import Data PIE</button> <button onclick="importDataInputs(DATA_INPUT_4)">Import Data DOUGHNUT</button> <button onclick="importDataInputs(DATA_INPUT_5)">Import Data BAR simple</button></div><div><textarea id="CHARTDATAINPUTS" rows="18" style="width: 98%;"></textarea></div></div><div><button onclick="buildChartInputs()" style="padding:5px;"><strong>BUILD CHART FROM GEOCHART INPUTS</strong></button></div></div><div style="display:inline-block; background-color: aliceblue; width: 50%; height: 100%; vertical-align:top;"><div style="text-align: left;">CHART.JS PROPS <span style="font-size: small;">(these Chart.js native parameters are used to draw the actual chart itself)</span></div><div style="padding:10px;"><select id="CHARTTYPE"><option value="line" selected="selected">Line</option><option value="bar">Bar</option><option value="pie">Pie</option><option value="doughnut">Doughnut</option></select></div><div><div style="display:inline-block; width: 49%;"><div><button onclick="importOptionsParsed(OPTIONS_NATIVE_1)">Import Options (default)</button> <button onclick="importOptionsParsed(OPTIONS_NATIVE_2)">Import Options dummy scale</button></div><div><textarea id="CHARTOPTIONSPARSED" rows="18" style="width: 98%"></textarea></div></div><div style="display:inline-block; width: 49%;"><div><button onclick="importDataParsed(DATA_NATIVE_1)">Import Data 1 rec</button> <button onclick="importDataParsed(DATA_NATIVE_2)">Import Data 2 recs</button> <button onclick="importDataParsed(DATA_NATIVE_3)">Import Data 2 recs w/ steps</button> <button onclick="importDataParsed(DATA_NATIVE_4)">Import Data using x,y</button></div><div><textarea id="CHARTDATAPARSED" rows="18" style="width: 98%"></textarea></div></div></div><div><button onclick="buildChartNative()" style="padding:5px;"><strong>BUILD CHART FROM CHART.JS PROPS</strong></button></div></div></div><div id="root2aca7b6b288c" style="position: relative; width: 800px;"></div><div><button onclick="redrawChart()" style="padding:5px;"><strong>Looks weird? Redraw!</strong></button> <button onclick="isLoadingState(1)" style="padding:5px;"><strong>Sim. loading whole chart</strong></button> <button onclick="isLoadingState(2)" style="padding:5px;"><strong>Sim. lazy loading of datasource</strong></button> <button onclick="isLoadingState(0)" style="padding:5px;"><strong>Clear loading sim.</strong></button></div><script>function importDataInputs(inputs) {
};</script><script defer="defer" src="main.js"></script></head><body><div style="text-align: center; height: 440px;"><div style="display:inline-block; background-color: lightgreen; width: 49%; height: 100%; vertical-align:top;"><div style="text-align: left;">GEOCHART INPUTS <span style="font-size: small;">(these parameters will be parsed and sent to the Chart.js props on the right and GeoChart created below)</span></div><div><span>Language: </span><select id="lang" onchange="languageChanged()"><option selected="selected" value="en">English</option><option value="fr">Français</option></select></div><div><div><button onclick="importDataInputs(DATA_INPUT_LINE_1)">Import Chart w/ time w/steps</button> <button onclick="importDataInputs(DATA_INPUT_LINE_2)">Import Chart w/ time logar. w/tension</button> <button onclick="importDataInputs(DATA_INPUT_LINE_2_SLIM)">Import Chart slim</button> <button onclick="importDataInputs(DATA_INPUT_LINE_3)">Imp. OGC Line</button> <button onclick="importDataInputs(DATA_INPUT_BAR_3)">Imp. OGC Bar</button><br/><button onclick="importDataInputs(DATA_INPUT_2)">Import Data BAR</button> <button onclick="importDataInputs(DATA_INPUT_3)">Import Data PIE</button> <button onclick="importDataInputs(DATA_INPUT_4)">Import Data DOUGHNUT</button> <button onclick="importDataInputs(DATA_INPUT_5)">Import Data BAR simple</button> <button onclick="importDataInputs(DATA_INPUT_6)">Import Data w/ nulls</button></div><div><textarea id="CHARTDATAINPUTS" rows="18" style="width: 98%;"></textarea></div></div><div><button onclick="buildChartInputs()" style="padding:5px;"><strong>BUILD CHART FROM GEOCHART INPUTS</strong></button></div></div><div style="display:inline-block; background-color: aliceblue; width: 50%; height: 100%; vertical-align:top;"><div style="text-align: left;">CHART.JS PROPS <span style="font-size: small;">(these Chart.js native parameters are used to draw the actual chart itself)</span></div><div style="padding:10px;"><select id="CHARTTYPE"><option value="line" selected="selected">Line</option><option value="bar">Bar</option><option value="pie">Pie</option><option value="doughnut">Doughnut</option></select></div><div><div style="display:inline-block; width: 49%;"><div><button onclick="importOptionsParsed(OPTIONS_NATIVE_1)">Import Options (default)</button> <button onclick="importOptionsParsed(OPTIONS_NATIVE_2)">Import Options dummy scale</button></div><div><textarea id="CHARTOPTIONSPARSED" rows="18" style="width: 98%"></textarea></div></div><div style="display:inline-block; width: 49%;"><div><button onclick="importDataParsed(DATA_NATIVE_1)">Import Data 1 rec</button> <button onclick="importDataParsed(DATA_NATIVE_2)">Import Data 2 recs</button> <button onclick="importDataParsed(DATA_NATIVE_3)">Import Data 2 recs w/ steps</button> <button onclick="importDataParsed(DATA_NATIVE_4)">Import Data using x,y</button></div><div><textarea id="CHARTDATAPARSED" rows="18" style="width: 98%"></textarea></div></div></div><div><button onclick="buildChartNative()" style="padding:5px;"><strong>BUILD CHART FROM CHART.JS PROPS</strong></button></div></div></div><div id="root2aca7b6b288c" style="position: relative; width: 800px;"></div><div><button onclick="redrawChart()" style="padding:5px;"><strong>Looks weird? Redraw!</strong></button> <button onclick="isLoadingState(1)" style="padding:5px;"><strong>Sim. loading whole chart</strong></button> <button onclick="isLoadingState(2)" style="padding:5px;"><strong>Sim. lazy loading of datasource</strong></button> <button onclick="isLoadingState(0)" style="padding:5px;"><strong>Clear loading sim.</strong></button></div><script>function importDataInputs(inputs) {
document.getElementById('CHARTDATAINPUTS').value = JSON.stringify(inputs, null, 2);
}

Expand Down
Loading

0 comments on commit 7f54a7b

Please sign in to comment.