-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
replacement of am5charts for a more simple library
- Loading branch information
romer8
committed
May 12, 2024
1 parent
6414ef3
commit 1612efb
Showing
11 changed files
with
269 additions
and
2,365 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
118 changes: 86 additions & 32 deletions
118
reactapp/features/hydroFabric/components/hydroFabricLinePlot.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,54 +1,108 @@ | ||
import { useEffect ,useRef } from "react"; | ||
import { useEffect, useRef } from 'react'; | ||
import { useHydroFabricContext } from "../hooks/useHydroFabricContext"; | ||
import { initializeChart, updateSeries } from "../lib/chartAuxiliary"; | ||
// import Chartist from 'chartist'; | ||
import { LineChart, FixedScaleAxis, easings } from 'chartist'; | ||
import { makeAxis,addAnimationToLineChart,makeTitle } from '../lib/chartAuxiliary'; | ||
import 'chartist/dist/index.css'; | ||
import '../css/chart.css'; | ||
|
||
|
||
|
||
const chartOptions = { | ||
axisX: { | ||
type: FixedScaleAxis, | ||
divisor: 5, | ||
labelInterpolationFnc: function(value) { | ||
return new Date(value).toLocaleDateString(); | ||
} | ||
}, | ||
axisY: { | ||
offset: 20 | ||
}, | ||
showArea: true, | ||
fullWidth: true, | ||
showPoint: false, | ||
chartPadding: { | ||
left: 70, | ||
top: 50 | ||
} | ||
}; | ||
|
||
|
||
const HydroFabricLinePlot = (props) => { | ||
// Reference to the chart container | ||
const chartRef = useRef(null); | ||
const {state, actions} = useHydroFabricContext(); | ||
const variable = `${state.catchment.id ? state.catchment.variable : 'streamflow'}`; | ||
const chartInstance = useRef(null); | ||
|
||
useEffect(() => { | ||
chartRef.current = initializeChart('chartdiv', props.title , props.subtitle) // initialize the chart | ||
return () => { | ||
// if full screen has changed, reset the chart | ||
if (chartRef.current && props.singleRowOn ){ | ||
chartRef.current && chartRef.current.dispose(); | ||
actions.reset(); | ||
} | ||
} | ||
}, []); | ||
const { state, actions } = useHydroFabricContext(); | ||
|
||
useEffect(() => { | ||
if (!state.nexus.series) return | ||
updateSeries(chartRef.current,state.nexus,props.title, props.subtitle,variable) | ||
if (!state.nexus.series) return; | ||
const nexusSeries = state.nexus.series.map(point => ({x: new Date(point.x), y: point.y})); | ||
const chartData = { | ||
series: [ | ||
{ name: 'Nexus', data: nexusSeries }, | ||
] | ||
}; | ||
|
||
chartInstance.current = new LineChart (chartRef.current, chartData, chartOptions); | ||
|
||
addAnimationToLineChart(chartInstance.current, easings) | ||
makeAxis(chartRef.current,'Date', 'StreamFlow' ) | ||
makeTitle(chartRef.current, `StreamFlow: ${state.nexus.id}`) | ||
|
||
|
||
return () => { | ||
if (chartRef.current && props.singleRowOn) { | ||
chartRef.current.dispose(); | ||
if(chartInstance && props.singleRowOn){ | ||
actions.reset_nexus(); | ||
chartInstance.current.detach(); | ||
document.getElementById('x-axis-title')?.remove(); | ||
document.getElementById('y-axis-title')?.remove(); | ||
} | ||
}; | ||
}, [state.nexus.series]); | ||
|
||
|
||
useEffect(() => { | ||
if (!state.catchment.series) return | ||
updateSeries(chartRef.current,state.catchment,props.title, props.subtitle, variable) | ||
if (!state.catchment.series) return; | ||
if (chartRef.current) { | ||
const catchmentSeries = state.catchment.series.map(point => ({x: new Date(point.x), y: point.y})); | ||
|
||
const chartData = { | ||
series: [ | ||
{ name: 'Catchment', data: catchmentSeries } | ||
] | ||
}; | ||
|
||
chartInstance.current = new LineChart(chartRef.current, chartData, chartOptions); | ||
|
||
addAnimationToLineChart(chartInstance.current, easings) | ||
makeAxis( | ||
chartRef.current, | ||
'Time (Date)', | ||
`${state.catchment.variable ? state.catchment.variable.toLowerCase().replace(/_/g, " ") : state.catchment.variable_list ? state.catchment.variable_list[0].label : null}` | ||
) | ||
|
||
|
||
makeTitle( | ||
chartRef.current, | ||
`${state.catchment.variable ? state.catchment.variable.toLowerCase().replace(/_/g, " ") : state.catchment.variable_list ? state.catchment.variable_list[0].label : null}: ${state.catchment.id} `) | ||
} | ||
|
||
return () => { | ||
if (chartRef.current && props.singleRowOn) { | ||
chartRef.current.dispose(); | ||
if(props.singleRowOn){ | ||
actions.reset_catchment(); | ||
chartRef.current.detach(); | ||
document.getElementById('x-axis-title')?.remove(); | ||
document.getElementById('y-axis-title')?.remove(); | ||
} | ||
}; | ||
}, [state.catchment.series]); | ||
|
||
|
||
return ( | ||
<div id="chartdiv" style={{ width: "100%", height: "100%" }}></div> | ||
|
||
) | ||
|
||
} | ||
export default HydroFabricLinePlot; | ||
}; | ||
}, [state.catchment.series]); // Re-run effect if series data changes | ||
|
||
return ( | ||
<div ref={chartRef} style={{ width: "100%", height: "90%", position: "relative"}}></div> | ||
); | ||
}; | ||
|
||
export default HydroFabricLinePlot; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
.ct-series-a .ct-line { | ||
stroke: #2c3e50; /* Blue */ | ||
stroke-width: 2px; | ||
} | ||
|
||
.ct-series-a .ct-area { | ||
fill: #2c3e50; | ||
} |
Oops, something went wrong.