EnergySummary
Provides users with a quick overview of their energy consumption and generation by comparing this week’s data to the previous week’s data.
This component is designed to work with electricity data, gas data, or both.
Formerly known as SingleEnergyStatisticsCard and MultiEnergyStatisticsCard when exported from Blueprint, this component combines the functionality of both into a single, versatile component alongside the use of the new useEnergySummary hook.
Electricity only
Preview
At a glance
You used 100% more on electricity last week compared to the week before
10 kWh more on electricity
£0.02Week before
£0.04Last week
Code
import { Typography } from '@krakentech/coral';
import {
EnergySummary,
EnergySummaryChart,
EnergySummaryChartContainer,
EnergySummaryChartLabel,
EnergySummaryCharts,
EnergySummaryIndicator,
EnergySummaryIndicators,
EnergySummarySummary,
useEnergySummary
} from '@krakentech/coral-charts';
// Both of these should come from your data fetching logic
const loading = false;
const error = false;
const {
percentageDifference,
kwhDifference,
energyTypeLabel,
electricity,
} = useEnergySummary({
data, // example data in the Data tab
energyType: 'electricity',
loading,
error: null,
currency: 'GBP',
locale: 'en',
});
<EnergySummary
loading={loading}
error={error}
errorMessage="Oops, there was an error loading this data."
>
<EnergySummarySummary>
<Typography textStyle="h4" component="h4">
At a glance
</Typography>
{percentageDifference < 0 && (
<Typography textStyle="body2">
You used {percentageDifference}% less on{' '}
{energyTypeLabel} last week compared to the week
before
</Typography>
)}
{percentageDifference === 0 && (
<Typography textStyle="body2">
You used about the same on {energyTypeLabel} last
week compared to the week before
</Typography>
)}
{percentageDifference > 0 && (
<Typography textStyle="body2">
You used {percentageDifference}% more on{' '}
{energyTypeLabel} last week compared to the week
before
</Typography>
)}
<EnergySummaryIndicators>
<EnergySummaryIndicator
direction={percentageDifference > 0 ? 'up' : 'down'}
/>
<Typography textStyle="body2">
{kwhDifference} kWh{' '}
{percentageDifference < 0 ? 'less' : 'more'} on{' '}
{energyTypeLabel}
</Typography>
</EnergySummaryIndicators>
</EnergySummarySummary>
<EnergySummaryCharts>
<EnergySummaryChartContainer>
<EnergySummaryChartLabel
value={
electricity.weekBeforeData.costValueFormatted
}
/>
<EnergySummaryChart
timePeriod="week-before"
type="electricity"
totalWeekBefore={
electricity.weekBeforeData.consumptionValue
}
totalLastWeek={
electricity.lastWeekData.consumptionValue
}
/>
<EnergySummaryChartLabel value="Week before" />
</EnergySummaryChartContainer>
<EnergySummaryChartContainer>
<EnergySummaryChartLabel
value={electricity.lastWeekData.costValueFormatted}
/>
<EnergySummaryChart
timePeriod="last-week"
type="electricity"
totalWeekBefore={
electricity.weekBeforeData.consumptionValue
}
totalLastWeek={
electricity.lastWeekData.consumptionValue
}
/>
<EnergySummaryChartLabel value="Last week" />
</EnergySummaryChartContainer>
</EnergySummaryCharts>
</EnergySummary>Data
import { addMinutes, endOfToday, getISODay, subDays } from 'date-fns';
export const ANCHOR_DATE = endOfToday();
export const endOfLastWeek = subDays(ANCHOR_DATE, getISODay(ANCHOR_DATE));
export const weekBeforeMiddle = subDays(endOfLastWeek, 10);
export const lastWeekMiddle = subDays(endOfLastWeek, 4);
const data = [
{
unit: 'kWh',
endAt: addMinutes(weekBeforeMiddle, 30).toISOString(),
first: 1,
value: 10,
startAt: weekBeforeMiddle.toISOString(),
metaData: {
statistics: [
{
type: 'CONSUMPTION_COST',
label: null,
value: 5,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '1',
},
description: 'Rate 1',
},
{
type: 'CONSUMPTION_COST',
label: null,
value: 5,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '1',
},
description: 'Rate 2',
},
],
},
},
{
unit: 'kWh',
endAt: addMinutes(lastWeekMiddle, 30).toISOString(),
first: 1,
value: 20,
startAt: lastWeekMiddle.toISOString(),
metaData: {
statistics: [
{
type: 'CONSUMPTION_COST',
label: null,
value: 10,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '2',
},
description: 'Rate 1',
},
{
type: 'CONSUMPTION_COST',
label: null,
value: 10,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '2',
},
description: 'Rate 2',
},
],
},
},
];Gas only
Preview
At a glance
You used 100% more on gas last week compared to the week before
10 kWh more on gas
£0.02Week before
£0.04Last week
Code
import { Typography } from '@krakentech/coral';
import {
EnergySummary,
EnergySummaryChart,
EnergySummaryChartContainer,
EnergySummaryChartLabel,
EnergySummaryCharts,
EnergySummaryIndicator,
EnergySummaryIndicators,
EnergySummarySummary,
useEnergySummary
} from '@krakentech/coral-charts';
const {
percentageDifference,
kwhDifference,
energyTypeLabel,
gas
} =
useEnergySummary({
data, // example data in the Data tab
energyType: 'gas',
loading,
error,
currency: 'GBP',
locale: 'en',
});
<EnergySummary
loading={loading}
error={error}
errorMessage="Oops, there was an error loading this data."
>
<EnergySummarySummary>
<Typography textStyle="h4" component="h4">
At a glance
</Typography>
{percentageDifference < 0 && (
<Typography textStyle="body2">
You used {percentageDifference}% less on{' '}
{energyTypeLabel} last week compared to the week before
</Typography>
)}
{percentageDifference === 0 && (
<Typography textStyle="body2">
You used about the same on {energyTypeLabel} last week
compared to the week before
</Typography>
)}
{percentageDifference > 0 && (
<Typography textStyle="body2">
You used {percentageDifference}% more on{' '}
{energyTypeLabel} last week compared to the week before
</Typography>
)}
<EnergySummaryIndicators>
<EnergySummaryIndicator
direction={percentageDifference > 0 ? 'up' : 'down'}
color="tertiary"
/>
<Typography textStyle="body2">
{kwhDifference} kWh{' '}
{percentageDifference < 0 ? 'less' : 'more'} on{' '}
{energyTypeLabel}
</Typography>
</EnergySummaryIndicators>
</EnergySummarySummary>
<EnergySummaryCharts>
<EnergySummaryChartContainer>
<EnergySummaryChartLabel
value={gas.weekBeforeData.costValueFormatted}
/>
<EnergySummaryChart
timePeriod="week-before"
type="gas"
totalWeekBefore={gas.weekBeforeData.consumptionValue}
totalLastWeek={gas.lastWeekData.consumptionValue}
/>
<EnergySummaryChartLabel value="Week before" />
</EnergySummaryChartContainer>
<EnergySummaryChartContainer>
<EnergySummaryChartLabel
value={gas.lastWeekData.costValueFormatted}
/>
<EnergySummaryChart
timePeriod="last-week"
type="gas"
totalWeekBefore={gas.weekBeforeData.consumptionValue}
totalLastWeek={gas.lastWeekData.consumptionValue}
/>
<EnergySummaryChartLabel value="Last week" />
</EnergySummaryChartContainer>
</EnergySummaryCharts>
</EnergySummary>Data
import { addMinutes, endOfToday, getISODay, subDays } from 'date-fns';
export const ANCHOR_DATE = endOfToday();
export const endOfLastWeek = subDays(ANCHOR_DATE, getISODay(ANCHOR_DATE));
export const weekBeforeMiddle = subDays(endOfLastWeek, 10);
export const lastWeekMiddle = subDays(endOfLastWeek, 4);
const data = [
{
unit: 'm³',
endAt: addMinutes(weekBeforeMiddle, 30).toISOString(),
first: 1,
value: 10,
startAt: weekBeforeMiddle.toISOString(),
metaData: {
statistics: [
{
type: 'CONSUMPTION_COST',
label: null,
value: 5,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '1',
},
description: 'Rate 1',
},
{
type: 'CONSUMPTION_COST',
label: null,
value: 5,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '1',
},
description: 'Rate 2',
},
],
},
},
{
unit: 'm³',
endAt: addMinutes(lastWeekMiddle, 30).toISOString(),
first: 1,
value: 20,
startAt: lastWeekMiddle.toISOString(),
metaData: {
statistics: [
{
type: 'CONSUMPTION_COST',
label: null,
value: 10,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '2',
},
description: 'Rate 1',
},
{
type: 'CONSUMPTION_COST',
label: null,
value: 10,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '2',
},
description: 'Rate 2',
},
],
},
},
];Dual energy (electricity and gas)
Preview
At a glance
You used 150% more on energy last week compared to the week before
£0.02 more on electricity
£0.02 more on gas
£0.04Week before
£0.08Last week
Code
import { Typography } from '@krakentech/coral';
import {
EnergySummary,
EnergySummaryChart,
EnergySummaryChartContainer,
EnergySummaryChartGroup,
EnergySummaryChartLabel,
EnergySummaryCharts,
EnergySummaryIndicator,
EnergySummaryIndicators,
EnergySummarySummary,
useEnergySummary
} from '@krakentech/coral-charts';
// Both of these should come from your data fetching logic
const loading = false;
const error = false;
const {
percentageDifference,
energyTypeLabel,
electricity,
gas,
weekBeforeCostTotalFormatted,
lastWeekCostTotalFormatted,
} = useEnergySummary({
data:, // example data in the Data tab
energyType: 'dual',
loading,
error,
currency: 'GBP',
locale: 'en',
});
<EnergySummary
loading={loading}
error={error}
errorMessage="Oops, there was an error loading this data."
>
<EnergySummarySummary>
<Typography textStyle="h4" component="h4">
At a glance
</Typography>
{percentageDifference < 0 && (
<Typography textStyle="body2">
You used {percentageDifference}% less on {energyTypeLabel}{' '}
last week compared to the week before
</Typography>
)}
{percentageDifference === 0 && (
<Typography textStyle="body2">
You used about the same on {energyTypeLabel} last week
compared to the week before
</Typography>
)}
{percentageDifference > 0 && (
<Typography textStyle="body2">
You used {percentageDifference}% more on {energyTypeLabel}{' '}
last week compared to the week before
</Typography>
)}
<EnergySummaryIndicators>
<EnergySummaryIndicator
direction={percentageDifference > 0 ? 'up' : 'down'}
/>
<Typography textStyle="body2">
{electricity.costDifferenceFormatted}{' '}
{percentageDifference < 0 ? 'less' : 'more'} on electricity
</Typography>
</EnergySummaryIndicators>
<EnergySummaryIndicators>
<EnergySummaryIndicator
direction={percentageDifference > 0 ? 'up' : 'down'}
color="tertiary"
/>
<Typography textStyle="body2">
{gas.costDifferenceFormatted}{' '}
{percentageDifference < 0 ? 'less' : 'more'} on gas{' '}
</Typography>
</EnergySummaryIndicators>
</EnergySummarySummary>
<EnergySummaryCharts>
<EnergySummaryChartContainer>
<EnergySummaryChartLabel
value={weekBeforeCostTotalFormatted}
/>
<EnergySummaryChartGroup>
<EnergySummaryChart
timePeriod="week-before"
type="electricity"
totalWeekBefore={
electricity.weekBeforeData.consumptionValue
}
totalLastWeek={
electricity.lastWeekData.consumptionValue
}
/>
<EnergySummaryChart
timePeriod="week-before"
type="gas"
totalWeekBefore={gas.weekBeforeData.consumptionValue}
totalLastWeek={gas.lastWeekData.consumptionValue}
/>
</EnergySummaryChartGroup>
<EnergySummaryChartLabel value="Week before" />
</EnergySummaryChartContainer>
<EnergySummaryChartContainer>
<EnergySummaryChartLabel
value={lastWeekCostTotalFormatted}
/>
<EnergySummaryChartGroup>
<EnergySummaryChart
timePeriod="last-week"
type="electricity"
totalWeekBefore={
electricity.weekBeforeData.consumptionValue
}
totalLastWeek={
electricity.lastWeekData.consumptionValue
}
/>
<EnergySummaryChart
timePeriod="last-week"
type="gas"
totalWeekBefore={gas.weekBeforeData.consumptionValue}
totalLastWeek={gas.lastWeekData.consumptionValue}
/>
</EnergySummaryChartGroup>
<EnergySummaryChartLabel value="Last week" />
</EnergySummaryChartContainer>
</EnergySummaryCharts>
</EnergySummary>Data
import { addMinutes, endOfToday, getISODay, subDays } from 'date-fns';
export const ANCHOR_DATE = endOfToday();
export const endOfLastWeek = subDays(ANCHOR_DATE, getISODay(ANCHOR_DATE));
export const weekBeforeMiddle = subDays(endOfLastWeek, 10);
export const lastWeekMiddle = subDays(endOfLastWeek, 4);
const data = [
{
unit: 'kWh',
endAt: addMinutes(weekBeforeMiddle, 30).toISOString(),
first: 1,
value: 10,
startAt: weekBeforeMiddle.toISOString(),
metaData: {
statistics: [
{
type: 'CONSUMPTION_COST',
label: null,
value: 5,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '1',
},
description: 'Rate 1',
},
{
type: 'CONSUMPTION_COST',
label: null,
value: 5,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '1',
},
description: 'Rate 2',
},
],
},
},
{
unit: 'm³',
endAt: addMinutes(weekBeforeMiddle, 30).toISOString(),
first: 1,
value: 10,
startAt: weekBeforeMiddle.toISOString(),
metaData: {
statistics: [
{
type: 'CONSUMPTION_COST',
label: null,
value: 5,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '1',
},
description: 'Rate 1',
},
{
type: 'CONSUMPTION_COST',
label: null,
value: 5,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '1',
},
description: 'Rate 2',
},
],
},
},
{
unit: 'kWh',
endAt: addMinutes(lastWeekMiddle, 30).toISOString(),
first: 1,
value: 30,
startAt: lastWeekMiddle.toISOString(),
metaData: {
statistics: [
{
type: 'CONSUMPTION_COST',
label: null,
value: 10,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '2',
},
description: 'Rate 1',
},
{
type: 'CONSUMPTION_COST',
label: null,
value: 10,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '2',
},
description: 'Rate 2',
},
],
},
},
{
unit: 'm³',
endAt: addMinutes(lastWeekMiddle, 30).toISOString(),
first: 1,
value: 20,
startAt: lastWeekMiddle.toISOString(),
metaData: {
statistics: [
{
type: 'CONSUMPTION_COST',
label: null,
value: 10,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '2',
},
description: 'Rate 1',
},
{
type: 'CONSUMPTION_COST',
label: null,
value: 10,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '2',
},
description: 'Rate 2',
},
],
},
},
];Fallback example
When trying to render dual energy information it may be the case that there’s no data to show for either electricity or gas. In this case the component will fallback to rendering only the data that is available.
In this example you’ll notice in the Data tab that gas has no consumption or cost values, which will trigger this example to only show electricity.
Preview
At a glance
You used 200% more on energy last week compared to the week before
£0.02 more on electricity
£0.02Week before
£0.04Last week
Code
import { Typography } from '@krakentech/coral';
import {
EnergySummary,
EnergySummaryChart,
EnergySummaryChartContainer,
EnergySummaryChartGroup,
EnergySummaryChartLabel,
EnergySummaryCharts,
EnergySummaryIndicator,
EnergySummaryIndicators,
EnergySummarySummary,
useEnergySummary
} from '@krakentech/coral-charts';
// Both of these should come from your data fetching logic
const loading = false;
const error = false;
const {
percentageDifference,
energyTypeLabel,
electricity,
gas,
weekBeforeCostTotalFormatted,
lastWeekCostTotalFormatted,
} = useEnergySummary({
data, // example data in the Data tab
energyType: 'dual',
loading: args.loading,
error: null,
currency: 'GBP',
locale: 'en',
});
<EnergySummary
loading={loading}
error={error}
errorMessage="Oops, there was an error loading this data."
>
<EnergySummarySummary>
<Typography textStyle="h4" component="h4">
At a glance
</Typography>
{percentageDifference < 0 && (
<Typography textStyle="body2">
You used {percentageDifference}% less on{' '}
{energyTypeLabel} last week compared to the week
before
</Typography>
)}
{percentageDifference === 0 && (
<Typography textStyle="body2">
You used about the same on {energyTypeLabel} last
week compared to the week before
</Typography>
)}
{percentageDifference > 0 && (
<Typography textStyle="body2">
You used {percentageDifference}% more on{' '}
{energyTypeLabel} last week compared to the week
before
</Typography>
)}
<EnergySummaryIndicators>
<EnergySummaryIndicator
direction={percentageDifference > 0 ? 'up' : 'down'}
/>
<Typography textStyle="body2">
{electricity.costDifferenceFormatted}{' '}
{percentageDifference < 0 ? 'less' : 'more'} on{' '}
electricity
</Typography>
</EnergySummaryIndicators>
{gas.lastWeekData.isCostAvailable && (
<EnergySummaryIndicators>
<EnergySummaryIndicator
direction={
percentageDifference > 0 ? 'up' : 'down'
}
color="tertiary"
/>
<Typography textStyle="body2">
{gas.costDifferenceFormatted}{' '}
{percentageDifference < 0 ? 'less' : 'more'} on
gas{' '}
</Typography>
</EnergySummaryIndicators>
)}
</EnergySummarySummary>
<EnergySummaryCharts>
<EnergySummaryChartContainer>
<EnergySummaryChartLabel
value={weekBeforeCostTotalFormatted}
/>
<EnergySummaryChartGroup>
<EnergySummaryChart
timePeriod="week-before"
type="electricity"
totalWeekBefore={
electricity.weekBeforeData.consumptionValue
}
totalLastWeek={
electricity.lastWeekData.consumptionValue
}
/>
{gas.lastWeekData.isCostAvailable && (
<EnergySummaryChart
timePeriod="week-before"
type="gas"
totalWeekBefore={
gas.weekBeforeData.consumptionValue
}
totalLastWeek={
gas.lastWeekData.consumptionValue
}
/>
)}
</EnergySummaryChartGroup>
<EnergySummaryChartLabel value="Week before" />
</EnergySummaryChartContainer>
<EnergySummaryChartContainer>
<EnergySummaryChartLabel
value={lastWeekCostTotalFormatted}
/>
<EnergySummaryChartGroup>
<EnergySummaryChart
timePeriod="last-week"
type="electricity"
totalWeekBefore={
electricity.weekBeforeData.consumptionValue
}
totalLastWeek={
electricity.lastWeekData.consumptionValue
}
/>
{gas.lastWeekData.isCostAvailable && (
<EnergySummaryChart
timePeriod="last-week"
type="gas"
totalWeekBefore={
gas.weekBeforeData.consumptionValue
}
totalLastWeek={
gas.lastWeekData.consumptionValue
}
/>
)}
</EnergySummaryChartGroup>
<EnergySummaryChartLabel value="Last week" />
</EnergySummaryChartContainer>
</EnergySummaryCharts>
</EnergySummary>Data
import { addMinutes, endOfToday, getISODay, subDays } from 'date-fns';
export const ANCHOR_DATE = endOfToday();
export const endOfLastWeek = subDays(ANCHOR_DATE, getISODay(ANCHOR_DATE));
export const weekBeforeMiddle = subDays(endOfLastWeek, 10);
export const lastWeekMiddle = subDays(endOfLastWeek, 4);
const data = [
{
unit: 'kWh',
endAt: addMinutes(weekBeforeMiddle, 30).toISOString(),
first: 1,
value: 10,
startAt: weekBeforeMiddle.toISOString(),
metaData: {
statistics: [
{
type: 'CONSUMPTION_COST',
label: null,
value: 5,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '1',
},
description: 'Rate 1',
},
{
type: 'CONSUMPTION_COST',
label: null,
value: 5,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '1',
},
description: 'Rate 2',
},
],
},
},
{
unit: 'm³',
endAt: addMinutes(weekBeforeMiddle, 30).toISOString(),
first: 1,
value: 0,
startAt: weekBeforeMiddle.toISOString(),
metaData: {
statistics: [
{
type: 'CONSUMPTION_COST',
label: null,
value: 0,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '0',
},
description: 'Rate 1',
},
{
type: 'CONSUMPTION_COST',
label: null,
value: 0,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '0',
},
description: 'Rate 2',
},
],
},
},
{
unit: 'kWh',
endAt: addMinutes(lastWeekMiddle, 30).toISOString(),
first: 1,
value: 30,
startAt: lastWeekMiddle.toISOString(),
metaData: {
statistics: [
{
type: 'CONSUMPTION_COST',
label: null,
value: 10,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '2',
},
description: 'Rate 1',
},
{
type: 'CONSUMPTION_COST',
label: null,
value: 10,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '2',
},
description: 'Rate 2',
},
],
},
},
{
unit: 'm³',
endAt: addMinutes(lastWeekMiddle, 30).toISOString(),
first: 1,
value: 0,
startAt: lastWeekMiddle.toISOString(),
metaData: {
statistics: [
{
type: 'CONSUMPTION_COST',
label: null,
value: 0,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '0',
},
description: 'Rate 1',
},
{
type: 'CONSUMPTION_COST',
label: null,
value: 0,
costInclTax: {
costCurrency: 'GBP',
estimatedAmount: '0',
},
description: 'Rate 2',
},
],
},
},
];Loading
Preview
Code
import { Typography } from '@krakentech/coral';
import {
EnergySummary,
EnergySummaryChart,
EnergySummaryChartContainer,
EnergySummaryChartGroup,
EnergySummaryChartLabel,
EnergySummaryCharts,
EnergySummaryIndicator,
EnergySummaryIndicators,
EnergySummarySummary,
useEnergySummary
} from '@krakentech/coral-charts';
// Both of these should come from your data fetching logic
const loading = true;
const error = false;
const {
percentageDifference,
energyTypeLabel,
electricity,
gas,
weekBeforeCostTotalFormatted,
lastWeekCostTotalFormatted,
} = useEnergySummary({
data, // example data in the Data tab
energyType: 'dual',
loading,
error,
currency: 'GBP',
locale: 'en',
});
<EnergySummary
loading={loading}
error={error}
errorMessage="Oops, there was an error loading this data."
>
<EnergySummarySummary>
<Typography textStyle="h4" component="h4">
At a glance
</Typography>
{percentageDifference < 0 && (
<Typography textStyle="body2">
You used {percentageDifference}% less on {energyTypeLabel}{' '}
last week compared to the week before
</Typography>
)}
{percentageDifference === 0 && (
<Typography textStyle="body2">
You used about the same on {energyTypeLabel} last week
compared to the week before
</Typography>
)}
{percentageDifference > 0 && (
<Typography textStyle="body2">
You used {percentageDifference}% more on {energyTypeLabel}{' '}
last week compared to the week before
</Typography>
)}
<EnergySummaryIndicators>
<EnergySummaryIndicator
direction={percentageDifference > 0 ? 'up' : 'down'}
/>
<Typography textStyle="body2">
{electricity.costDifferenceFormatted}{' '}
{percentageDifference < 0 ? 'less' : 'more'} on electricity
</Typography>
</EnergySummaryIndicators>
<EnergySummaryIndicators>
<EnergySummaryIndicator
direction={percentageDifference > 0 ? 'up' : 'down'}
color="tertiary"
/>
<Typography textStyle="body2">
{gas.costDifferenceFormatted}{' '}
{percentageDifference < 0 ? 'less' : 'more'} on gas{' '}
</Typography>
</EnergySummaryIndicators>
</EnergySummarySummary>
<EnergySummaryCharts>
<EnergySummaryChartContainer>
<EnergySummaryChartLabel
value={weekBeforeCostTotalFormatted}
/>
<EnergySummaryChartGroup>
<EnergySummaryChart
timePeriod="week-before"
type="electricity"
totalWeekBefore={
electricity.weekBeforeData.consumptionValue
}
totalLastWeek={
electricity.lastWeekData.consumptionValue
}
/>
<EnergySummaryChart
timePeriod="week-before"
type="gas"
totalWeekBefore={gas.weekBeforeData.consumptionValue}
totalLastWeek={gas.lastWeekData.consumptionValue}
/>
</EnergySummaryChartGroup>
<EnergySummaryChartLabel value="Week before" />
</EnergySummaryChartContainer>
<EnergySummaryChartContainer>
<EnergySummaryChartLabel
value={lastWeekCostTotalFormatted}
/>
<EnergySummaryChartGroup>
<EnergySummaryChart
timePeriod="last-week"
type="electricity"
totalWeekBefore={
electricity.weekBeforeData.consumptionValue
}
totalLastWeek={
electricity.lastWeekData.consumptionValue
}
/>
<EnergySummaryChart
timePeriod="last-week"
type="gas"
totalWeekBefore={gas.weekBeforeData.consumptionValue}
totalLastWeek={gas.lastWeekData.consumptionValue}
/>
</EnergySummaryChartGroup>
<EnergySummaryChartLabel value="Last week" />
</EnergySummaryChartContainer>
</EnergySummaryCharts>
</EnergySummary>Data
// No data because it's loading
const data = [];No data / error
Preview
Oops, there was an error loading this data.
Code
import { Typography } from '@krakentech/coral';
import {
EnergySummary,
EnergySummaryChart,
EnergySummaryChartContainer,
EnergySummaryChartGroup,
EnergySummaryChartLabel,
EnergySummaryCharts,
EnergySummaryIndicator,
EnergySummaryIndicators,
EnergySummarySummary,
useEnergySummary
} from '@krakentech/coral-charts';
// Both of these should come from your data fetching logic
const loading = false;
const error = true;
const {
percentageDifference,
energyTypeLabel,
electricity,
gas,
weekBeforeCostTotalFormatted,
lastWeekCostTotalFormatted,
} = useEnergySummary({
data, // example data in the Data tab
energyType: 'dual',
loading,
error,
currency: 'GBP',
locale: 'en',
});
<EnergySummary
loading={loading}
error={error}
errorMessage="Oops, there was an error loading this data."
>
...
</EnergySummary>Data
// No data because there's an error
const data = [];Last updated on