@scality/core-ui 0.162.0 → 0.163.0

package/stories/linetimeseriechart.stories.tsx

@@ -0,0 +1,485 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { MetricsTimeSpanProvider } from '../src/lib/components/linetemporalchart/MetricTimespanProvider';
+import { LineTimeSerieChart } from '../src/lib/components/linetimeseriechart/linetimeseriechart.component';
+import { ChartLegendWrapper } from '../src/lib/components/chartlegend/ChartLegendWrapper';
+import { lineTimeSeriesColorRange } from '../src/lib/style/theme';
+import { ChartLegend } from '../src/lib/components/chartlegend/ChartLegend';
+
+const ChartWithProviders = (props) => {
+  return (
+    <MetricsTimeSpanProvider>
+      <ChartLegendWrapper
+        colorSet={{
+          'ip-10-160-122-207.eu-north-1.compute.internal':
+            lineTimeSeriesColorRange[0],
+        }}
+      >
+        <LineTimeSerieChart {...props} />
+        <ChartLegend shape="line" />
+      </ChartLegendWrapper>
+    </MetricsTimeSpanProvider>
+  );
+};
+
+const ChartWithProviders2 = (props) => {
+  return (
+    <MetricsTimeSpanProvider>
+      <ChartLegendWrapper
+        colorSet={{
+          'ip-10-160-122-207.eu-north-1.compute.internal':
+            lineTimeSeriesColorRange[0],
+          'ip-10-160-122-207.eu-north-2.compute.internal':
+            lineTimeSeriesColorRange[1],
+        }}
+      >
+        <LineTimeSerieChart {...props} />
+        <ChartLegend shape="line" direction="vertical" />
+      </ChartLegendWrapper>
+    </MetricsTimeSpanProvider>
+  );
+};
+const meta: Meta<typeof LineTimeSerieChart> = {
+  title: 'Components/Data Display/Charts/LineTimeSerieChart',
+  component: ChartWithProviders,
+  decorators: [
+    (Story) => (
+      <div>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    series: { control: 'object' },
+    title: { control: 'text' },
+    height: { control: 'number' },
+    startingTimeStamp: { control: 'number' },
+    unitRange: { control: 'object' },
+    isLoading: { control: 'boolean' },
+    yAxisType: {
+      control: 'select',
+      options: ['default', 'percentage', 'symmetrical'],
+    },
+    yAxisTitle: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ChartWithProviders>;
+
+const prometheusData = [
+  [1740405600, '47.554166666666674'],
+  [1740406320, '53.00833333333337'],
+  [1740407760, '40.18750000000011'],
+  [1740408480, '59.187499999999886'],
+  [1740409200, '62.49583333333344'],
+  [1740409920, '57.449999999999854'],
+  [1740410640, '45.187500000000114'],
+  [1740411360, '58.620833333332975'],
+  [1740412080, '53.0786411974533'],
+  [1740412800, '64.90833333333342'],
+  [1740413520, '81.23333333333335'],
+  [1740414240, '64.81614215228686'],
+  [1740415680, '67.17291666666674'],
+  [1740416400, '55.233333333333405'],
+  [1740417120, '47.91666666666667'],
+  [1740417840, '72.1083333333335'],
+  [1740418560, '61.90904847636171'],
+  [1740419280, '51.06666666666646'],
+  [1740420000, '39.50416666666664'],
+  [1740420720, '46.91666666666682'],
+  [1740421440, '35.0541666666669'],
+  [1740422160, '46.666666666666856'],
+  [1740422880, '43.57083333333397'],
+  [1740423600, '36.795833333333114'],
+  [1740467520, '42.81249999999962'],
+  [1740468240, '53.44272951530158'],
+  [1740468960, '55.69583333333337'],
+  [1740469680, '46.09583333333338'],
+  [1740470400, '43.020833333333705'],
+  [1740471120, '55.395833333333634'],
+  [1740471840, '46.56249999999999'],
+  [1740472560, '47.16249999999983'],
+  [1740473280, '44.69166666666676'],
+  [1740474000, '55.29583333333411'],
+  [1740474720, '42.25833333333412'],
+  [1740475440, '61.570833333332764'],
+  [1740476160, '42.86666666666633'],
+  [1740476880, '38.03750000000036'],
+  [1740477600, '41.32916666666612'],
+  [1740478320, '52.22499999999779'],
+  [1740479040, '42.13333333333368'],
+  [1740479760, '34.791666666665904'],
+  [1740480480, '36.58333333333227'],
+  [1740481200, '37.20833333333226'],
+  [1740481920, '49.19583333333246'],
+  [1740482640, '41.016666666666126'],
+  [1740483360, '37.54166666666834'],
+  [1740484080, '35.38750000000013'],
+  [1740484800, '39.02500000000069'],
+  [1740485520, '47.14054738807047'],
+  [1740486240, '46.79166666666787'],
+  [1740486960, '42.950363357557244'],
+  [1740487680, '35.22916666666637'],
+  [1740488400, '34.94583333333519'],
+  [1740489120, '41.044577067983646'],
+  [1740489840, '58.17083333333282'],
+  [1740490560, '40.00000000000304'],
+  [1740491280, '45.57500000000194'],
+  [1740492000, '45.741666666666184'],
+];
+
+const prometheusData2 = [
+  [1740405600, '45.23'],
+  [1740406320, '120.45'],
+  [1740407760, '35.88'],
+  [1740408480, '42.98'],
+  [1740409200, '88.29'],
+  [1740409920, '25.84'],
+  [1740410640, '95.38'],
+  [1740411360, '30.22'],
+  [1740412080, '78.17'],
+  [1740412800, '110.40'],
+  [1740413520, '45.83'],
+  [1740414240, '92.21'],
+  [1740415680, '28.57'],
+  [1740416400, '75.43'],
+  [1740417120, '115.31'],
+  [1740417840, '38.50'],
+  [1740418560, '82.40'],
+  [1740419280, '27.86'],
+  [1740420000, '98.90'],
+  [1740420720, '31.21'],
+  [1740421440, '85.25'],
+  [1740422160, '105.86'],
+  [1740422880, '42.97'],
+  [1740423600, '71.19'],
+  [1740467520, '95.41'],
+  [1740468240, '36.84'],
+  [1740468960, '88.89'],
+  [1740469680, '29.39'],
+  [1740470400, '96.42'],
+  [1740471120, '33.79'],
+  [1740471840, '108.96'],
+  [1740472560, '45.56'],
+  [1740473280, '77.89'],
+  [1740474000, '102.49'],
+  [1740474720, '35.65'],
+  [1740475440, '88.97'],
+  [1740476160, '25.26'],
+  [1740476880, '91.43'],
+  [1740477600, '104.72'],
+  [1740478320, '39.62'],
+  [1740479040, '85.53'],
+  [1740479760, '28.19'],
+  [1740480480, '99.98'],
+  [1740481200, '41.60'],
+  [1740481920, '76.59'],
+  [1740482640, '113.41'],
+  [1740483360, '30.94'],
+  [1740484080, '88.78'],
+  [1740484800, '32.42'],
+  [1740485520, '95.54'],
+  [1740486240, '29.19'],
+  [1740486960, '86.35'],
+  [1740487680, '118.62'],
+  [1740488400, '37.34'],
+  [1740489120, '84.44'],
+  [1740489840, '34.57'],
+  [1740490560, '93.40'],
+  [1740491280, '28.97'],
+  [1740492000, '107.14'],
+];
+
+const prometheusData3 = [
+  [1740405600, '65.32'],
+  [1740406320, '145.78'],
+  [1740407760, '42.91'],
+  [1740408480, '88.45'],
+  [1740409200, '132.67'],
+  [1740409920, '35.89'],
+  [1740410640, '128.45'],
+  [1740411360, '48.23'],
+  [1740412080, '95.34'],
+  [1740412800, '155.67'],
+  [1740413520, '52.45'],
+  [1740414240, '115.89'],
+  [1740415680, '38.92'],
+  [1740416400, '92.45'],
+  [1740417120, '142.34'],
+  [1740417840, '45.67'],
+  [1740418560, '108.90'],
+  [1740419280, '32.45'],
+  [1740420000, '125.67'],
+  [1740420720, '41.23'],
+  [1740421440, '98.45'],
+  [1740422160, '138.90'],
+  [1740422880, '55.67'],
+  [1740423600, '85.34'],
+  [1740467520, '122.45'],
+  [1740468240, '44.56'],
+  [1740468960, '105.78'],
+  [1740469680, '36.89'],
+  [1740470400, '118.90'],
+  [1740471120, '48.23'],
+  [1740471840, '148.67'],
+  [1740472560, '58.90'],
+  [1740473280, '92.45'],
+  [1740474000, '135.67'],
+  [1740474720, '42.34'],
+  [1740475440, '108.90'],
+  [1740476160, '38.45'],
+  [1740476880, '115.67'],
+  [1740477600, '142.34'],
+  [1740478320, '52.45'],
+  [1740479040, '102.34'],
+  [1740479760, '35.67'],
+  [1740480480, '128.90'],
+  [1740481200, '45.67'],
+  [1740481920, '95.34'],
+  [1740482640, '152.45'],
+  [1740483360, '42.34'],
+  [1740484080, '112.45'],
+  [1740484800, '38.90'],
+  [1740485520, '122.34'],
+  [1740486240, '35.67'],
+  [1740486960, '105.78'],
+  [1740487680, '158.90'],
+  [1740488400, '48.23'],
+  [1740489120, '98.45'],
+  [1740489840, '42.34'],
+  [1740490560, '118.90'],
+  [1740491280, '35.67'],
+  [1740492000, '145.78'],
+];
+
+const prometheusData4 = [
+  [1740405600, '85.45'],
+  [1740406320, '178.92'],
+  [1740407760, '32.15'],
+  [1740408480, '142.78'],
+  [1740409200, '195.34'],
+  [1740409920, '28.67'],
+  [1740410640, '165.89'],
+  [1740411360, '45.23'],
+  [1740412080, '138.56'],
+  [1740412800, '188.90'],
+  [1740413520, '35.67'],
+  [1740414240, '155.45'],
+  [1740415680, '25.89'],
+  [1740416400, '128.90'],
+  [1740417120, '182.34'],
+  [1740417840, '42.56'],
+  [1740418560, '145.78'],
+  [1740419280, '22.34'],
+  [1740420000, '168.90'],
+  [1740420720, '38.45'],
+  [1740421440, '135.67'],
+  [1740422160, '192.45'],
+  [1740422880, '48.23'],
+  [1740423600, '158.90'],
+  [1740467520, '28.45'],
+  [1740468240, '175.67'],
+  [1740468960, '42.34'],
+  [1740469680, '148.90'],
+  [1740470400, '185.67'],
+  [1740471120, '32.45'],
+  [1740471840, '172.34'],
+  [1740472560, '45.67'],
+  [1740473280, '152.89'],
+  [1740474000, '198.45'],
+  [1740474720, '25.67'],
+  [1740475440, '162.34'],
+  [1740476160, '35.89'],
+  [1740476880, '145.67'],
+  [1740477600, '188.90'],
+  [1740478320, '42.34'],
+  [1740479040, '158.90'],
+  [1740479760, '28.45'],
+  [1740480480, '175.67'],
+  [1740481200, '38.90'],
+  [1740481920, '142.34'],
+  [1740482640, '192.45'],
+  [1740483360, '32.67'],
+  [1740484080, '165.89'],
+  [1740484800, '45.23'],
+  [1740485520, '155.67'],
+  [1740486240, '25.89'],
+  [1740486960, '168.90'],
+  [1740487680, '195.34'],
+  [1740488400, '35.67'],
+  [1740489120, '148.90'],
+  [1740489840, '42.34'],
+  [1740490560, '172.45'],
+  [1740491280, '28.67'],
+  [1740492000, '185.90'],
+];
+
+const prometheusData5 = [
+  [1740405600, '12850.45'],
+  [1740406320, '21780.92'],
+  [1740407760, '8320.15'],
+  [1740408480, '16420.78'],
+  [1740409200, '21950.34'],
+  [1740409920, '9280.67'],
+  [1740410640, '18605.89'],
+  [1740411360, '12450.23'],
+  [1740412080, '21308.56'],
+  [1740412800, '18808.90'],
+  [1740413520, '15305.67'],
+  [1740414240, '24550.45'],
+  [1740415680, '10205.89'],
+  [1740416400, '19208.90'],
+  [1740417120, '24802.34'],
+  [1740417840, '13402.56'],
+  [1740418560, '21450.78'],
+  [1740419280, '18220.34'],
+  [1740420000, '26608.90'],
+  [1740420720, '19380.45'],
+  [1740421440, '23350.67'],
+  [1740422160, '19920.45'],
+  [1740422880, '15480.23'],
+  [1740423600, '28580.90'],
+  [1740467520, '17280.45'],
+  [1740468240, '24750.67'],
+  [1740468960, '18420.34'],
+  [1740469680, '23480.90'],
+  [1740470400, '19850.67'],
+  [1740471120, '27320.45'],
+  [1740471840, '19720.34'],
+  [1740472560, '24405.67'],
+  [1740473280, '18502.89'],
+  [1740474000, '27908.45'],
+  [1740474720, '16205.67'],
+  [1740475440, '23602.34'],
+  [1740476160, '19305.89'],
+  [1740476880, '24450.67'],
+  [1740477600, '18858.90'],
+  [1740478320, '26492.34'],
+  [1740479040, '19588.90'],
+  [1740479760, '28288.45'],
+  [1740480480, '19765.67'],
+  [1740481200, '23398.90'],
+  [1740481920, '19492.34'],
+  [1740482640, '25929.45'],
+  [1740483360, '18329.67'],
+  [1740484080, '24659.89'],
+  [1740484800, '19459.23'],
+  [1740485520, '27559.67'],
+  [1740486240, '18259.89'],
+  [1740486960, '25689.90'],
+  [1740487680, '19959.34'],
+  [1740488400, '28359.67'],
+  [1740489120, '19489.90'],
+  [1740489840, '26429.34'],
+  [1740490560, '19729.45'],
+  [1740491280, '28289.67'],
+  [1740492000, '19859.90'],
+];
+
+export const PercentageChartExample: Story = {
+  args: {
+    series: [
+      {
+        data: prometheusData,
+        resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+        metricPrefix: 'instance:10.160.122.207:9100',
+        getTooltipLabel: (prefix, resource) => `${resource}`,
+      },
+    ],
+    title: 'CPU Usage',
+    height: 200,
+    startingTimeStamp: prometheusData[0][0],
+    isLoading: false,
+    isLegendHidden: false,
+    helpText: 'This is the help text',
+    yAxisType: 'percentage',
+    yAxisTitle: '',
+  },
+};
+const UNIT_RANGE_BS = [
+  {
+    threshold: 1,
+    label: 'B/s',
+  },
+  {
+    threshold: 1024,
+    label: 'KiB/s',
+  },
+  {
+    threshold: 1024 * 1024,
+    label: 'MiB/s',
+  },
+  {
+    threshold: 1024 * 1024 * 1024,
+    label: 'GiB/s',
+  },
+  {
+    threshold: 1024 * 1024 * 1024 * 1024,
+    label: 'TiB/s',
+  },
+];
+export const SymmetricalAxisExample: Story = {
+  render: (args) => <ChartWithProviders2 {...args} />,
+  args: {
+    series: {
+      above: [
+        {
+          data: prometheusData,
+          resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+          metricPrefix: 'in',
+          getTooltipLabel: (prefix, resource) => `${resource}-${prefix}`,
+        },
+        {
+          data: prometheusData2,
+          resource: 'ip-10-160-122-207.eu-north-2.compute.internal',
+          metricPrefix: 'in',
+          getTooltipLabel: (prefix, resource) => `${resource}-${prefix}`,
+        },
+      ],
+      below: [
+        {
+          data: prometheusData3,
+          resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+          metricPrefix: 'out',
+          getTooltipLabel: (prefix, resource) => `${resource}-${prefix}`,
+        },
+        {
+          data: prometheusData4,
+          resource: 'ip-10-160-122-207.eu-north-2.compute.internal',
+          metricPrefix: 'out',
+          getTooltipLabel: (prefix, resource) => `${resource}-${prefix}`,
+        },
+      ],
+    },
+    title: 'ControlPlane Bandwidth',
+    height: 200,
+    startingTimeStamp: prometheusData[0][0],
+    unitRange: UNIT_RANGE_BS,
+    isLoading: false,
+    isLegendHidden: false,
+    yAxisType: 'symmetrical',
+    yAxisTitle: 'in(+)/out(-)',
+  },
+};
+export const AutoUnitChartExample: Story = {
+  args: {
+    series: [
+      {
+        data: prometheusData5,
+        resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+        metricPrefix: 'instance:10.160.122.207:9100',
+        getTooltipLabel: (prefix, resource) => `${resource}`,
+      },
+    ],
+    title: 'Disk Throughput',
+    startingTimeStamp: prometheusData5[0][0],
+    height: 200,
+    unitRange: UNIT_RANGE_BS,
+    yAxisType: 'default',
+  },
+};