From 9da84142ae8600e20ab75c3a376edb0acca6c6b3 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Wed, 25 Oct 2023 08:46:46 +0000
Subject: [PATCH] test(rtl): charts
---
src/components/Charts/AxisBottom.spec.tsx | 26 +-
src/components/Charts/AxisRight.spec.tsx | 6 +-
src/components/Charts/Bar.spec.tsx | 49 +-
src/components/Charts/BarChart.spec.tsx | 33 +
src/components/Charts/UncomingBar.spec.tsx | 24 +
.../__snapshots__/AxisBottom.spec.tsx.snap | 782 ++++++------
.../__snapshots__/AxisRight.spec.tsx.snap | 130 +-
.../Charts/__snapshots__/Bar.spec.tsx.snap | 1091 ++++++++++-------
.../__snapshots__/BarChart.spec.tsx.snap | 373 ++++++
.../__snapshots__/UncomingBar.spec.tsx.snap | 33 +
tests/__mocks__/xScale.mock.ts | 12 +
11 files changed, 1635 insertions(+), 924 deletions(-)
create mode 100644 src/components/Charts/BarChart.spec.tsx
create mode 100644 src/components/Charts/UncomingBar.spec.tsx
create mode 100644 src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
create mode 100644 src/components/Charts/__snapshots__/UncomingBar.spec.tsx.snap
create mode 100644 tests/__mocks__/xScale.mock.ts
diff --git a/src/components/Charts/AxisBottom.spec.tsx b/src/components/Charts/AxisBottom.spec.tsx
index c10ede15c..a0b36f53c 100644
--- a/src/components/Charts/AxisBottom.spec.tsx
+++ b/src/components/Charts/AxisBottom.spec.tsx
@@ -1,6 +1,6 @@
+import { render } from '@testing-library/react'
import { scaleBand, ScaleBand } from 'd3-scale'
import { TimeStep } from 'enums'
-import { mount } from 'enzyme'
import { DateTime } from 'luxon'
import React from 'react'
import { Provider } from 'react-redux'
@@ -31,68 +31,68 @@ describe('AxisBottom component test', () => {
})
it('should correctly render YEAR format of AxisBottom', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<AxisBottom {...mockProps} timeStep={TimeStep.YEAR} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render MONTH format of AxisBottom', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<AxisBottom {...mockProps} timeStep={TimeStep.MONTH} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render DAY format of AxisBottom without duel', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<AxisBottom {...mockProps} timeStep={TimeStep.DAY} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render DAY format of AxisBottom with duel', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<AxisBottom {...mockProps} timeStep={TimeStep.DAY} isDuel={true} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render WEEK format of AxisBottom', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<AxisBottom {...mockProps} timeStep={TimeStep.WEEK} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render HALF_AN_HOUR format of AxisBottom', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<AxisBottom {...mockProps} timeStep={TimeStep.HALF_AN_HOUR} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Charts/AxisRight.spec.tsx b/src/components/Charts/AxisRight.spec.tsx
index 0ff617522..cd7f3c94e 100644
--- a/src/components/Charts/AxisRight.spec.tsx
+++ b/src/components/Charts/AxisRight.spec.tsx
@@ -1,6 +1,6 @@
+import { render } from '@testing-library/react'
import { scaleLinear } from 'd3'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import AxisRight from './AxisRight'
@@ -14,11 +14,11 @@ const mockProps = {
describe('AxisRight component test', () => {
it('should render correctly AxisRight', () => {
- const wrapper = mount(
+ const { container } = render(
<svg>
<AxisRight {...mockProps} />
</svg>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Charts/Bar.spec.tsx b/src/components/Charts/Bar.spec.tsx
index e1de4c716..adb15d350 100644
--- a/src/components/Charts/Bar.spec.tsx
+++ b/src/components/Charts/Bar.spec.tsx
@@ -1,23 +1,16 @@
-import { scaleBand, ScaleBand, scaleLinear } from 'd3'
+import { render } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { scaleLinear } from 'd3'
import { FluidType, TimeStep } from 'enums'
-import { mount } from 'enzyme'
import { DateTime } from 'luxon'
import React from 'react'
import { Provider } from 'react-redux'
import * as chartActions from 'store/chart/chart.slice'
import { graphData } from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
+import { mockXScale } from 'tests/__mocks__/xScale.mock'
import Bar from './Bar'
-const mockXScale: ScaleBand<string> = scaleBand()
- .domain(
- graphData.actualData.map(d =>
- d.date.toLocaleString(DateTime.DATETIME_SHORT)
- )
- )
- .range([0, 10])
- .padding(0.2)
-
const mockParam = {
index: 4,
dataload: graphData.actualData[0],
@@ -45,91 +38,91 @@ describe('Bar component test', () => {
})
it('should correctly render Multifluid Bar', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<Bar {...mockParam} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render Electricity Bar', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<Bar {...mockParam} fluidType={FluidType.ELECTRICITY} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render Water Bar', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<Bar {...mockParam} fluidType={FluidType.WATER} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render Gas Bar', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<Bar {...mockParam} fluidType={FluidType.GAS} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render Bar with showCompare', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<Bar {...mockParam} compare={true} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render Bar with isSwitching', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<Bar {...mockParam} isSwitching={true} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render Bar with isDuel', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<Bar {...mockParam} isDuel={true} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- it('should dispatch selected date when bar is clicked', () => {
- const wrapper = mount(
+ it('should dispatch selected date when bar is clicked', async () => {
+ const { container } = render(
<Provider store={store}>
<svg>
<Bar {...mockParam} />
</svg>
</Provider>
)
- wrapper.find('rect').first().simulate('click')
+ await userEvent.click(container.querySelector('rect') as Element)
expect(setSelectedDateSpy).toHaveBeenCalledTimes(1)
expect(setSelectedDateSpy).toHaveBeenCalledWith(
graphData.actualData[0].date
diff --git a/src/components/Charts/BarChart.spec.tsx b/src/components/Charts/BarChart.spec.tsx
new file mode 100644
index 000000000..49177db68
--- /dev/null
+++ b/src/components/Charts/BarChart.spec.tsx
@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react'
+import { FluidType, TimeStep } from 'enums'
+import { DateTime } from 'luxon'
+import React from 'react'
+import { Provider } from 'react-redux'
+import { graphData } from 'tests/__mocks__/chartData.mock'
+import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
+import BarChart from './BarChart'
+
+describe('BarChart component', () => {
+ const store = createMockEcolyoStore({
+ chart: {
+ selectedDate: DateTime.fromISO('2020-10-01T00:00:00.000Z', {
+ zone: 'utc',
+ }),
+ },
+ global: mockGlobalState,
+ })
+ it('should render correctly', () => {
+ const { container } = render(
+ <Provider store={store}>
+ <BarChart
+ chartData={graphData}
+ fluidType={FluidType.ELECTRICITY}
+ isSwitching={false}
+ showCompare={false}
+ timeStep={TimeStep.MONTH}
+ />
+ </Provider>
+ )
+ expect(container).toMatchSnapshot()
+ })
+})
diff --git a/src/components/Charts/UncomingBar.spec.tsx b/src/components/Charts/UncomingBar.spec.tsx
new file mode 100644
index 000000000..30f5cb0cc
--- /dev/null
+++ b/src/components/Charts/UncomingBar.spec.tsx
@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react'
+import { scaleLinear } from 'd3'
+import React from 'react'
+import { dataLoadArray } from 'tests/__mocks__/chartData.mock'
+import { mockXScale } from 'tests/__mocks__/xScale.mock'
+import UncomingBar from './UncomingBar'
+
+describe('Uncoming component', () => {
+ it('should match snapshot', () => {
+ const { container } = render(
+ <svg>
+ <UncomingBar
+ index={0}
+ average={10}
+ dataload={dataLoadArray[0]}
+ height={50}
+ xScale={mockXScale}
+ yScale={scaleLinear()}
+ />
+ </svg>
+ )
+ expect(container).toMatchSnapshot()
+ })
+})
diff --git a/src/components/Charts/__snapshots__/AxisBottom.spec.tsx.snap b/src/components/Charts/__snapshots__/AxisBottom.spec.tsx.snap
index 08178300f..f468fcd4d 100644
--- a/src/components/Charts/__snapshots__/AxisBottom.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/AxisBottom.spec.tsx.snap
@@ -1,440 +1,404 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AxisBottom component test should correctly render DAY format of AxisBottom with duel 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "state": "EMPTY",
- "value": -1,
- "valueDetail": null,
- },
- ]
- }
- height={20}
- isDuel={true}
- marginBottom={10}
- marginLeft={10}
- timeStep={20}
- xScale={[Function]}
- />
+ <g
+ class="axis x"
+ transform="translate(10, 10)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ x="0"
+ >
+ T
+ </tspan>
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ dy="1.2em"
+ text-anchor="middle"
+ x="0"
+ >
+ 1
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ text-anchor="middle"
+ x="0"
+ >
+ F
+ </tspan>
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ dy="1.2em"
+ text-anchor="middle"
+ x="0"
+ >
+ 2
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ text-anchor="middle"
+ x="0"
+ >
+ S
+ </tspan>
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ dy="1.2em"
+ text-anchor="middle"
+ x="0"
+ >
+ 3
+ </tspan>
+ </text>
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`AxisBottom component test should correctly render DAY format of AxisBottom without duel 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "state": "EMPTY",
- "value": -1,
- "valueDetail": null,
- },
- ]
- }
- height={20}
- marginBottom={10}
- marginLeft={10}
- timeStep={20}
- xScale={[Function]}
- />
+ <g
+ class="axis x"
+ transform="translate(10, 10)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ />
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ />
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ />
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`AxisBottom component test should correctly render HALF_AN_HOUR format of AxisBottom 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "state": "EMPTY",
- "value": -1,
- "valueDetail": null,
- },
- ]
- }
- height={20}
- marginBottom={10}
- marginLeft={10}
- timeStep={10}
- xScale={[Function]}
- />
+ <g
+ class="axis x"
+ transform="translate(10, 10)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ x="18.181818181818183"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ 0
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ />
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ />
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`AxisBottom component test should correctly render MONTH format of AxisBottom 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "state": "EMPTY",
- "value": -1,
- "valueDetail": null,
- },
- ]
- }
- height={20}
- marginBottom={10}
- marginLeft={10}
- timeStep={40}
- xScale={[Function]}
- />
+ <g
+ class="axis x"
+ transform="translate(10, 10)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ O
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ O
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ O
+ </tspan>
+ </text>
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`AxisBottom component test should correctly render WEEK format of AxisBottom 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "state": "EMPTY",
- "value": -1,
- "valueDetail": null,
- },
- ]
- }
- height={20}
- marginBottom={10}
- marginLeft={10}
- timeStep={30}
- xScale={[Function]}
- />
+ <g
+ class="axis x"
+ transform="translate(10, 10)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ x="0"
+ >
+ T
+ </tspan>
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ dy="1.2em"
+ text-anchor="middle"
+ x="0"
+ >
+ 1
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ text-anchor="middle"
+ x="0"
+ >
+ F
+ </tspan>
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ dy="1.2em"
+ text-anchor="middle"
+ x="0"
+ >
+ 2
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ text-anchor="middle"
+ x="0"
+ >
+ S
+ </tspan>
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ dy="1.2em"
+ text-anchor="middle"
+ x="0"
+ >
+ 3
+ </tspan>
+ </text>
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`AxisBottom component test should correctly render YEAR format of AxisBottom 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "state": "EMPTY",
- "value": -1,
- "valueDetail": null,
- },
- ]
- }
- height={20}
- marginBottom={10}
- marginLeft={10}
- timeStep={50}
- xScale={[Function]}
- />
+ <g
+ class="axis x"
+ transform="translate(10, 10)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ 2020
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ 2020
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ 2020
+ </tspan>
+ </text>
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
diff --git a/src/components/Charts/__snapshots__/AxisRight.spec.tsx.snap b/src/components/Charts/__snapshots__/AxisRight.spec.tsx.snap
index 0bca2ffa0..0c40c3183 100644
--- a/src/components/Charts/__snapshots__/AxisRight.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/AxisRight.spec.tsx.snap
@@ -1,13 +1,125 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AxisRight component test should render correctly AxisRight 1`] = `
-<svg>
- <AxisRight
- fluidType={0}
- marginRight={5}
- marginTop={5}
- width={40}
- yScale={[Function]}
- />
-</svg>
+<div>
+ <svg>
+ <g
+ class="axis y"
+ fill="none"
+ font-family="sans-serif"
+ font-size="10"
+ text-anchor="start"
+ transform="translate(35, 5)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,0.5)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-40"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 0
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,0.7)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-40"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 0.2 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,0.9)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-40"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 0.4 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,1.1)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-40"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 0.6 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,1.3)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-40"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 0.8 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,1.5)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-40"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 1 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ </g>
+ </svg>
+</div>
`;
diff --git a/src/components/Charts/__snapshots__/Bar.spec.tsx.snap b/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
index 69202aa01..e3916b074 100644
--- a/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
@@ -1,498 +1,665 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Bar component test should correctly render Bar with isDuel 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <Bar
- compare={false}
- compareDataload={
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- }
- }
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- fluidType={3}
- height={20}
- index={4}
- isDuel={true}
- isSwitching={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
- />
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(0.625, -40)"
+ >
+ <rect
+ class="background-false"
+ fill="#E0E0E0"
+ height="60"
+ width="2.5000000000000004"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-MULTIFLUID undefined bounce-3 delay--4"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ <g
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-MULTIFLUID undefined bounce-3 delay--4"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-duel"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`Bar component test should correctly render Bar with isSwitching 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <Bar
- compare={false}
- compareDataload={
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- }
- }
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- fluidType={3}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={true}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
- />
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(0.625, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="60"
+ width="2.5000000000000004"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ <g
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`Bar component test should correctly render Bar with showCompare 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <Bar
- compare={true}
- compareDataload={
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- }
- }
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- fluidType={3}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
- />
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(0.625, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="60"
+ width="2.5000000000000004"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ d="
+ M1.2500000000000002,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h25.840149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-1.2500000000000002
+ z"
+ />
+ </g>
+ <g
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ d="
+ M1.2500000000000002,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h25.840149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-1.2500000000000002
+ z"
+ />
+ </g>
+ <g
+ transform="translate(0.625, 61.65554999999999)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-compare-MULTIFLUID selected bounce-2 delay--0 bounce-2 delay"
+ id="gradient-compare"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-compare-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-compare-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-compare-MULTIFLUID selected bounce-2 delay--0 bounce-2 delay"
+ d="
+ M0,-10.413887499999998
+ a-10.413887499999998,-10.413887499999998 0 0 1 -10.413887499999998,10.413887499999998
+ h22.077774999999995
+ a-10.413887499999998,-10.413887499999998 0 0 1 -10.413887499999998,-10.413887499999998
+ v-31.241662499999993
+ h-1.2500000000000002
+ z"
+ />
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`Bar component test should correctly render Electricity Bar 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <Bar
- compare={false}
- compareDataload={
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- }
- }
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- fluidType={0}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
- />
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(0.625, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="60"
+ width="2.5000000000000004"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ <g
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`Bar component test should correctly render Gas Bar 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <Bar
- compare={false}
- compareDataload={
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- }
- }
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- fluidType={2}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
- />
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(0.625, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="60"
+ width="2.5000000000000004"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-GAS undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ <g
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-GAS undefined selected bounce-2 delay"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-GAS undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`Bar component test should correctly render Multifluid Bar 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <Bar
- compare={false}
- compareDataload={
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- }
- }
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- fluidType={3}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
- />
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(0.625, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="60"
+ width="2.5000000000000004"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ <g
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`Bar component test should correctly render Water Bar 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <Bar
- compare={false}
- compareDataload={
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- }
- }
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- fluidType={1}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
- />
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(0.625, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="60"
+ width="2.5000000000000004"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-WATER undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ <g
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-WATER undefined selected bounce-2 delay"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-WATER undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
diff --git a/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap b/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
new file mode 100644
index 000000000..c4118a6aa
--- /dev/null
+++ b/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
@@ -0,0 +1,373 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BarChart component should render correctly 1`] = `
+<div>
+ <svg
+ height="400"
+ width="600"
+ >
+ <g
+ class="axis y"
+ fill="none"
+ font-family="sans-serif"
+ font-size="10"
+ text-anchor="start"
+ transform="translate(545, 20)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,330.5)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-600"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 0
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,235.09711796566359)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-600"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 20 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,139.69423593132723)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-600"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 40 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,44.29135389699087)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-600"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 60 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ </g>
+ <g
+ transform="translate(10,20)"
+ >
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(33.43750000000003, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="370"
+ width="133.75"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(33.43750000000003, 0)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h125.75
+ a4,4 0 0 1 4,4
+ v326
+ h-133.75
+ z"
+ />
+ </g>
+ <g
+ transform="translate(33.43750000000003, 0)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h125.75
+ a4,4 0 0 1 4,4
+ v326
+ h-133.75
+ z"
+ />
+ </g>
+ </g>
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(200.62500000000003, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="370"
+ width="133.75"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(200.62500000000003, 35.89414182939363)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h125.75
+ a4,4 0 0 1 4,4
+ v290.1058581706064
+ h-133.75
+ z"
+ />
+ </g>
+ <g
+ transform="translate(200.62500000000003, 35.89414182939363)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h125.75
+ a4,4 0 0 1 4,4
+ v290.1058581706064
+ h-133.75
+ z"
+ />
+ </g>
+ </g>
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(367.8125, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="370"
+ width="133.75"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(367.8125, 309.3554761977037)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY bar-UNCOMING undefined selected bounce-2 delay"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h125.75
+ a4,4 0 0 1 4,4
+ v16.644523802296305
+ h-133.75
+ z"
+ />
+ </g>
+ </g>
+ </g>
+ <g
+ class="axis x"
+ transform="translate(10, 350)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(33.43750000000003, 0)"
+ >
+ <text
+ class="chart-ticks-y-text"
+ dy="0.71em"
+ transform="translate(66.875)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ O
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(200.62500000000003, 0)"
+ >
+ <text
+ class="chart-ticks-y-text"
+ dy="0.71em"
+ transform="translate(66.875)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ O
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(367.8125, 0)"
+ >
+ <text
+ class="chart-ticks-y-text"
+ dy="0.71em"
+ transform="translate(66.875)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ O
+ </tspan>
+ </text>
+ </g>
+ </g>
+ </svg>
+</div>
+`;
diff --git a/src/components/Charts/__snapshots__/UncomingBar.spec.tsx.snap b/src/components/Charts/__snapshots__/UncomingBar.spec.tsx.snap
new file mode 100644
index 000000000..0b62bbcd9
--- /dev/null
+++ b/src/components/Charts/__snapshots__/UncomingBar.spec.tsx.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Uncoming component should match snapshot 1`] = `
+<div>
+ <svg>
+ <g>
+ <g
+ transform="translate(undefined, -40)"
+ >
+ <rect
+ class="background-false"
+ fill="#E0E0E0"
+ height="90"
+ width="2.5000000000000004"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ transform="translate(undefined, 10)"
+ >
+ <path
+ class="bar-UNCOMING bounce-1 delay--0"
+ d="M0,40v-36 a4,4 0 0 1 4,-4h-5.5a4,4 0 0 1 4,4v36"
+ fill="url(#gradient)"
+ stroke="#61f0f2"
+ stroke-dasharray="5"
+ />
+ </g>
+ </g>
+ </svg>
+</div>
+`;
diff --git a/tests/__mocks__/xScale.mock.ts b/tests/__mocks__/xScale.mock.ts
new file mode 100644
index 000000000..132bf8989
--- /dev/null
+++ b/tests/__mocks__/xScale.mock.ts
@@ -0,0 +1,12 @@
+import { ScaleBand, scaleBand } from 'd3'
+import { DateTime } from 'luxon'
+import { graphData } from './chartData.mock'
+
+export const mockXScale: ScaleBand<string> = scaleBand()
+ .domain(
+ graphData.actualData.map(d =>
+ d.date.toLocaleString(DateTime.DATETIME_SHORT)
+ )
+ )
+ .range([0, 10])
+ .padding(0.2)
--
GitLab