diff --git a/TSX/CollectionWidget/EventCountChart.tsx b/TSX/CollectionWidget/EventCountChart.tsx index 5931893..8492a6f 100644 --- a/TSX/CollectionWidget/EventCountChart.tsx +++ b/TSX/CollectionWidget/EventCountChart.tsx @@ -28,7 +28,7 @@ import _ from 'lodash'; import * as React from 'react'; import { EventWidget } from '../global'; import { SpacedColor } from '@gpa-gemstone/helper-functions'; -import { Bar, Legend, DataLegend, Plot } from '@gpa-gemstone/react-graph'; +import { Bar, Legend, DataLegend, Plot, Infobox } from '@gpa-gemstone/react-graph'; type TimeCount = { Year: string, @@ -40,8 +40,9 @@ type TimeCount = { interface IData { XVal: number, Width: number, - Data: number[] - Color: string + Data: number[], + Color: string, + Label?: string } interface IEnabled { @@ -80,14 +81,15 @@ const EventCountChart: EventWidget.ICollectionWidget<{}> = { return Object .keys(datum) .filter(key => key !== "Year" && key !== "Month" && datum[key] > 0 && enabled[key].enabled) - .map(key => { + .map((key, ind, arr) => { const bottomYVal = topYVal; topYVal += datum[key]; return { XVal: xVal, Width: width, Data: [bottomYVal, topYVal], - Color: enabled[key].color + Color: enabled[key].color, + Label: ind === arr.length - 1 ? date.format("MMM YY") : undefined } } ); @@ -95,6 +97,26 @@ const EventCountChart: EventWidget.ICollectionWidget<{}> = { ); }, [data, enabled]); + const chartBounds: { + Bounds: [number, number], + Margin: number + } = React.useMemo(() => { + const maxY = chartData.reduce((maxVal, datum) => { + if (datum.Data[1] > maxVal) + return datum.Data[1]; + return maxVal; + }, 0); + + const margin = maxY * 0.15; + + return { + Bounds: [0, maxY + margin], + Margin: margin + }; + }, [chartData]); + + + const tDomain: [number, number] = React.useMemo(() => { if (chartData.length === 0) return [0, 1]; @@ -203,7 +225,7 @@ const EventCountChart: EventWidget.ICollectionWidget<{}> = { return (
- {props.Title == null ? "Historical Event Counts" : props.Title} + {props.Name}
@@ -212,8 +234,9 @@ const EventCountChart: EventWidget.ICollectionWidget<{}> = { height={dimensions.Height} width={dimensions.Width} showBorder={false} - yDomain={'HalfAutoValue'} + yDomain={'Manual'} XAxisType={"time"} + defaultYdomain={chartBounds.Bounds} defaultTdomain={tDomain} legend={'hidden'} showMouse={false} @@ -221,7 +244,7 @@ const EventCountChart: EventWidget.ICollectionWidget<{}> = { pan={false} showGrid={true} hideYAxis={false} - hideXAxis={false} + hideXAxis={true} defaultMouseMode={"select"} menuLocation={"hide"} useMetricFactors={false}> @@ -236,6 +259,18 @@ const EventCountChart: EventWidget.ICollectionWidget<{}> = { key={index} />) )} + {chartData.filter(item => item.Label != null).map((item, index) => + ( +
+ {item.Label} +
+
) + )}
diff --git a/TSX/CollectionWidget/EventCountTable.tsx b/TSX/CollectionWidget/EventCountTable.tsx index 5168a11..c60094b 100644 --- a/TSX/CollectionWidget/EventCountTable.tsx +++ b/TSX/CollectionWidget/EventCountTable.tsx @@ -106,7 +106,7 @@ const EventCountTable: EventWidget.ICollectionWidget<{}> = { return (
- {props.Title == null ? "Meter Activity" : props.Title} + {props.Name}
diff --git a/TSX/CollectionWidget/EventTable.tsx b/TSX/CollectionWidget/EventTable.tsx index 34a5613..c452d8b 100644 --- a/TSX/CollectionWidget/EventTable.tsx +++ b/TSX/CollectionWidget/EventTable.tsx @@ -82,15 +82,7 @@ const EventTable: EventWidget.ICollectionWidget<{}> = { return (
- {props.Title == null ? - 'Displaying Events(s) ' + - (pageInfo.TotalRecords > 0 ? - (pageInfo.RecordsPerPage * searchState.Page + 1) : 0) + - ' - ' + - (pageInfo.RecordsPerPage * searchState.Page + events.length) + - ' out of ' + pageInfo.TotalRecords - : props.Title - } + {props.Name}
diff --git a/TSX/CollectionWidget/MagDurChart.tsx b/TSX/CollectionWidget/MagDurChart.tsx index 4fd1aac..8986426 100644 --- a/TSX/CollectionWidget/MagDurChart.tsx +++ b/TSX/CollectionWidget/MagDurChart.tsx @@ -26,7 +26,7 @@ import { Line, Plot, Circle, AggregatingCircles } from '@gpa-gemstone/react-grap import { Application, OpenXDA } from '@gpa-gemstone/application-typings' import { EventWidget } from '../global'; import { CheckBox, Input } from '@gpa-gemstone/react-forms'; -import { GenericController, LoadingIcon, Search } from '@gpa-gemstone/react-interactive'; +import { Alert, GenericController, LoadingIcon, Search } from '@gpa-gemstone/react-interactive'; import _ from 'lodash'; interface ISettings { @@ -189,7 +189,7 @@ const MagDurChart: EventWidget.ICollectionWidget = { return (
- {props.Title == null ? "Magnitude Duration Chart" : props.Title} + {props.Name}
@@ -236,12 +236,12 @@ const MagDurChart: EventWidget.ICollectionWidget = { {selectedCircle}
-
- {data?.length === props.Settings.ChartLimit ? - `Only the first ${props.Settings.ChartLimit} chronological results are shown - please narrow your search or increase the number of results in the application settings.` : - `{${data?.length ?? 0} results` - } -
+ + {data?.length === props.Settings.ChartLimit ? `Only the first ${props.Settings.ChartLimit} chronological results are shown - please narrow your search or increase the number of results in the application settings.` : + `${data?.length ?? 0} events shown`} +
) diff --git a/TSX/CollectionWidget/PQHealthIndex.tsx b/TSX/CollectionWidget/PQHealthIndex.tsx index 6af03e7..e3c7e2a 100644 --- a/TSX/CollectionWidget/PQHealthIndex.tsx +++ b/TSX/CollectionWidget/PQHealthIndex.tsx @@ -295,12 +295,12 @@ const PQHealthIndex: EventWidget.ICollectionWidget = { return (
- {props.Title == null ? "EPRI PQ Health Index" : props.Title} + {props.Name}
-
+
@@ -309,15 +309,16 @@ const PQHealthIndex: EventWidget.ICollectionWidget = {
Error retrieving index data.
: - <> + null } - {sites.IDs.length === 0 ? -
- Select sites to get started. -
: - <> +
+ {sites.IDs.length === 0 ? + + No sites are selected. Please select at least 1 site. : + null } -
void, EventFilter: EventWidget.ICollectionFilter, - Title?: string, HomePath: string, Roles: string[] } @@ -79,7 +78,6 @@ const CollectionWidgetRouter: React.FC = (props: IProps) => { ErrorMessage={`Widget ${props.Widget.Name} has encoutered an error.`} > = { const [openSeeSettings, setOpenSeeSettings] = React.useState(null); React.useEffect(() => { setOpenSeeSettings(loadSettings()) }, []) - React.useLayoutEffect(() => { SetWidth(divref?.current?.offsetWidth ?? 0) }); + React.useLayoutEffect(() => { + if (divref?.current == null) + return; + + const rect = divref.current.getBoundingClientRect(); + const style = window.getComputedStyle(divref.current); + const paddingLeft = parseFloat(style.paddingLeft); + const paddingRight = parseFloat(style.paddingRight); + const borderLeftWidth = parseFloat(style.borderLeftWidth); + const borderRightWidth = parseFloat(style.borderRightWidth); + + const width = rect.width - paddingLeft - paddingRight - borderLeftWidth - borderRightWidth; + + SetWidth(width) + }); React.useEffect(() => { const Vhandle = GetData('Voltage', setVData); diff --git a/TSX/Widget/PQICurves.tsx b/TSX/Widget/PQICurves.tsx index 820a746..3d8f6c8 100644 --- a/TSX/Widget/PQICurves.tsx +++ b/TSX/Widget/PQICurves.tsx @@ -82,10 +82,10 @@ const PQICurves: EventWidget.IWidget<{}> = { PQI Impacted Curves:
- = { onSelect={() => { }}> {curves.map((c, i) => {