Skip to content

Commit

Permalink
Added new option for borderWidth
Browse files Browse the repository at this point in the history 
Added a new test case with steps
Adjusted the height and position of the Y slider a bit in the ui
  • Loading branch information
@Alex-NRCan
Alex-NRCan committed Nov 3, 2023
1 parent e6de16e commit f46ca82
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 8 deletions.
148 changes: 144 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,150 @@
<script src="https://canadian-geospatial-platform.github.io/geoview/public/cgpv-main.js"></script>

<script>
const DATA_INPUT_1 = {
const DATA_INPUT_LINE_1 = {
chart: 'line',
title: 'The Title 1',
title: 'Line Chart with time on x and sliders',
geochart: {
featuresUsePalette: true,
borderWidth: 2,
xAxis: {
type: 'time',
unit: 'month',
property: 'CollectionStart_DebutPrelevement'
},
yAxis: {
property: 'Activity_Activite_mBqm3'
},
xSlider: {
display: true,
},
ySlider: {
display: true,
}
},
category: "Radionuclide_Radionucleide",
datasources: [{
display: "Feature 1",
items: [
{
Location_Emplacement: 'Victoria',
CollectionStart_DebutPrelevement: 1678320000000,
Radionuclide_Radionucleide: '7Be',
Activity_Activite_mBqm3: 2.7395,
OBJECTID: 56874
},
{
Location_Emplacement: 'Vancouver',
CollectionStart_DebutPrelevement: 1669248000000,
Radionuclide_Radionucleide: '7Be',
Activity_Activite_mBqm3: 0.83,
OBJECTID: 56875
},
{
Location_Emplacement: 'Yellowknife',
CollectionStart_DebutPrelevement: 1679443200000,
Radionuclide_Radionucleide: '210Pb',
Activity_Activite_mBqm3: 1.0166,
OBJECTID: 56876
},
{
Location_Emplacement: 'Vancouver',
CollectionStart_DebutPrelevement: 1678406400000,
Radionuclide_Radionucleide: '210Pb',
Activity_Activite_mBqm3: 0.939,
OBJECTID: 56877
},
{
Location_Emplacement: 'Montreal',
CollectionStart_DebutPrelevement: 1679011200000,
Radionuclide_Radionucleide: '210Pb',
Activity_Activite_mBqm3: 1.1814,
OBJECTID: 56878
},
{
Location_Emplacement: 'Toronto',
CollectionStart_DebutPrelevement: 1677974400000,
Radionuclide_Radionucleide: '210Pb',
Activity_Activite_mBqm3: 0.6715,
OBJECTID: 56879
},
{
Location_Emplacement: 'Montreal',
CollectionStart_DebutPrelevement: 1668643200000,
Radionuclide_Radionucleide: '7Be',
Activity_Activite_mBqm3: 3.2589,
OBJECTID: 56880
}]
},{
display: "Feature 2",
items: [
{
Location_Emplacement: 'Montreal',
CollectionStart_DebutPrelevement: 1678320000000,
Radionuclide_Radionucleide: '210Pb',
Activity_Activite_mBqm3: 2.7395,
OBJECTID: 56874
},
{
Location_Emplacement: 'Toronto',
CollectionStart_DebutPrelevement: 1669248000000,
Radionuclide_Radionucleide: '7Be',
Activity_Activite_mBqm3: 0.83,
OBJECTID: 56875
},
{
Location_Emplacement: 'Yellowknife',
CollectionStart_DebutPrelevement: 1679443200000,
Radionuclide_Radionucleide: '210Pb',
Activity_Activite_mBqm3: 1.0166,
OBJECTID: 56876
},
{
Location_Emplacement: 'Vancouver',
CollectionStart_DebutPrelevement: 1678406400000,
Radionuclide_Radionucleide: '210Pb',
Activity_Activite_mBqm3: 0.939,
OBJECTID: 56877
},
{
Location_Emplacement: 'Victoria',
CollectionStart_DebutPrelevement: 1679011200000,
Radionuclide_Radionucleide: '210Pb',
Activity_Activite_mBqm3: 1.1814,
OBJECTID: 56878
},
{
Location_Emplacement: 'Calgary',
CollectionStart_DebutPrelevement: 1677974400000,
Radionuclide_Radionucleide: '210Pb',
Activity_Activite_mBqm3: 0.6715,
OBJECTID: 56879
},
{
Location_Emplacement: 'Montreal',
CollectionStart_DebutPrelevement: 1668643200000,
Radionuclide_Radionucleide: '210Pb',
Activity_Activite_mBqm3: 3.2589,
OBJECTID: 56880
}]
}],
chartjsOptions: {
responsive: true,
plugins: {
legend: {
display: false,
}
}
}
};

const DATA_INPUT_LINE_2 = {
chart: 'line',
title: 'Line Chart with time on x and sliders and steps',
geochart: {
featuresUsePalette: true,
borderWidth: 2,
useSteps: "before",
xAxis: {
type: 'time',
unit: 'month',
Expand Down Expand Up @@ -390,7 +529,8 @@
</div>
<div>
<div>
<button onclick="importDataInputs(DATA_INPUT_1)">Import Data LINE w/ time w/sliders</button>
<button onclick="importDataInputs(DATA_INPUT_LINE_1)">Import Data LINE w/ time w/sliders</button>
<button onclick="importDataInputs(DATA_INPUT_LINE_2)">Import Data LINE w/ time w/sliders w/steps</button>
<button onclick="importDataInputs(DATA_INPUT_2)">Import Data BAR</button>
<button onclick="importDataInputs(DATA_INPUT_3)">Import Data 'compressed' BAR</button>
</div>
Expand Down Expand Up @@ -520,7 +660,7 @@
}

// Load data 1
importDataInputs(DATA_INPUT_1);
importDataInputs(DATA_INPUT_LINE_1);
importDataParsed(DATA_NATIVE_1);
importOptionsParsed(OPTIONS_NATIVE_1);

Expand Down
11 changes: 8 additions & 3 deletions src/chart-parsing.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,15 +93,20 @@ function createDataset<TType extends ChartType, TData extends GeoDefaultDataPoin
(theDataset as ChartDataset<'line', TData>).stepped = chartConfig.geochart.useSteps;
}

// If chart is line or bar
if (chartConfig.chart === 'line' || chartConfig.chart === 'bar') {
// If features should use a color palette
if (chartConfig.geochart.featuresUsePalette) {
theDataset.backgroundColor = chartConfig.geochart.color_palette![creationIndex % chartConfig.geochart.color_palette!.length];
if (chartConfig.chart === 'line') {
theDataset.borderColor = chartConfig.geochart.color_palette![creationIndex % chartConfig.geochart.color_palette!.length];
}
theDataset.borderColor = chartConfig.geochart.color_palette![creationIndex % chartConfig.geochart.color_palette!.length];
}
// If the border width is set (applies to all datasets the same)
if (chartConfig.geochart.borderWidth) {
theDataset.borderWidth = chartConfig.geochart.borderWidth;
}
}

// If labels are colors (special case thing)
if (attributes && chartConfig.geochart.labelsAreColors && chartConfig.geochart.xAxis?.property) {
const labelColors = (attributes[chartConfig.geochart.xAxis!.property || 'label'] as string).split(';').map((x) => {
return x.toLowerCase();
Expand Down
1 change: 1 addition & 0 deletions src/chart-types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export type GeoChartOptions<TType extends ChartType> = {
datasources: GeoChartDatasource[];
geochart: {
color_palette?: string[];
borderWidth?: number;
featuresUsePalette?: boolean;
labelsAreColors?: boolean;
useSteps?: 'before' | 'after' | 'middle' | boolean;
Expand Down
2 changes: 1 addition & 1 deletion src/chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -487,7 +487,7 @@ export function GeoChart<
if (inputs.chart === 'line' && inputs.geochart.ySlider?.display) {
// Need 100% height to occupy some space, otherwise it's crunched.
return (
<Box sx={{ height: '100%' }}>
<Box sx={{ height: '85%' }}>
<Slider
min={ySliderMin}
max={ySliderMax}
Expand Down

0 comments on commit f46ca82

Please sign in to comment.