@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.0 → 23.10.18

package/src/Graph/helpers/doc.ts

@@ -1,323 +0,0 @@
-import dayjs from 'dayjs';
-import { equals, isEmpty, isNil } from 'ramda';
-
-interface InitialValue {
-  section: string;
-  sectionDescription?: string;
-  type: string;
-}
-
-const getInitialValue = ({ section, type }: InitialValue): string => `
-  <details>
-  <summary>${section} ${getCustomText(type)}</summary>
-  >`;
-
-interface Prop {
-  description: string;
-  type: string;
-}
-
-interface Section {
-  description?: string;
-  name: string;
-  note?: string;
-  props: Array<Record<string, Prop>>;
-  type: string;
-}
-
-interface Description {
-  sections: Array<Section>;
-}
-
-export const getCustomText = (text: string): string =>
-  `<span style="color:#1EA7FD;fontSize:12px">(${text})</span>`;
-
-export const getBodyDescription = ({ key, description, type }): string =>
-  `<strong>${key}</strong> : ${description} ${getCustomText(type)} <br>`;
-
-export const getDescription = ({ sections }: Description): string => {
-  const descriptionBody = sections.map((item) => {
-    const { name, props, type: typeSection } = item;
-
-    if (isNil(props) || isEmpty(props)) {
-      return `${getInitialValue({
-        section: name,
-        type: typeSection
-      })}<br></details>`;
-    }
-
-    const formattedProps = props.reduce((accumulator, currentValue, index) => {
-      const key = Object.keys(currentValue)[0];
-      const { description, type } = currentValue[key];
-      const body = `${accumulator} ${getBodyDescription({
-        description,
-        key,
-        type
-      })}`;
-
-      if (!equals(index, props.length - 1)) {
-        return body;
-      }
-
-      return `${body}</details>`;
-    }, getInitialValue({ section: name, type: typeSection }));
-
-    return formattedProps as string;
-  });
-
-  const result = descriptionBody.reduce(
-    (accumulate, currentValue) => `${accumulate}${currentValue}`
-  );
-
-  return result;
-};
-
-export const propsAxisX = [
-  {
-    xAxisTickFormat: {
-      description:
-        'string of the formatted date for the tick text, reference to the format of dayjs',
-      type: 'string'
-    }
-  }
-];
-
-export const propsAxisY = [
-  { display: { description: 'display or not the axis', type: 'boolean' } },
-  {
-    displayUnit: {
-      description: 'display or not the unit of the axis',
-      type: 'boolean'
-    }
-  }
-];
-
-const defaultBaseUrl =
-  'http://localhost:3000/centreon/api/latest/monitoring/hosts/151/services/1160/metrics/performance';
-const defaultStart = new Date(
-  dayjs(Date.now()).subtract(24, 'hour').toDate().getTime()
-).toISOString();
-
-const defaultEnd = new Date(Date.now()).toISOString();
-
-export const argTypes = {
-  anchorPoint: {
-    control: 'object',
-    description: getDescription({
-      sections: [
-        {
-          name: 'areaRegularLinesAnchorPoint',
-          props: [
-            {
-              display: {
-                description: 'display or not the anchor point',
-                type: 'boolean'
-              }
-            }
-          ],
-          type: 'object'
-        },
-        {
-          name: 'areaStackedLinesAnchorPoint',
-          props: [
-            {
-              display: {
-                description: 'display or not the anchor point',
-                type: 'boolean'
-              }
-            }
-          ],
-          type: 'object'
-        }
-      ]
-    }),
-    table: {
-      category: 'Graph interaction',
-      type: {
-        detail:
-          'displays the timing, circle, vertical and horizontal line for each point of the corresponding graph (line) according to the interaction of the mouse with the graph',
-        summary: 'object'
-      }
-    }
-  },
-  axis: {
-    axisX: {
-      xAxisTickFormat: { control: 'text' }
-    },
-    axisYLeft: {
-      display: { control: 'boolean' },
-      displayUnit: { control: 'boolean' }
-    },
-    axisYRight: {
-      displayUnit: { control: 'boolean' }
-    },
-    control: 'object',
-    description: getDescription({
-      sections: [
-        {
-          name: 'axisX',
-          props: propsAxisX,
-          type: 'object'
-        },
-        {
-          name: 'axisYLeft',
-          props: propsAxisY,
-          type: 'object'
-        },
-        {
-          name: 'axisYRight',
-          props: propsAxisY,
-          type: 'object'
-        }
-      ]
-    }),
-    table: {
-      category: 'Graph component',
-      type: { detail: 'control the axis of the graph', summary: 'object' }
-    }
-  },
-  baseUrl: {
-    control: {
-      type: 'text'
-    },
-    description: 'base url to get graph data',
-    name: 'baseUrl',
-    table: {
-      category: 'Graph data',
-      defaultValue: {
-        summary: defaultBaseUrl
-      },
-      type: { required: true, summary: 'string' }
-    }
-  },
-  end: {
-    control: 'text',
-    description: 'the end of the interval of time to get graph data',
-    table: {
-      category: 'Graph data',
-      type: {
-        detail: 'the end of the interval',
-        summary: 'ISOString (required*)'
-      }
-    }
-  },
-  height: {
-    control: 'number',
-    description: 'the height of the graph',
-    table: {
-      category: 'Sizes',
-      type: { summary: 'number' }
-    }
-  },
-  shapeLines: {
-    control: 'object',
-    description: getDescription({
-      sections: [
-        {
-          name: 'areaRegularLines',
-          props: [
-            {
-              display: {
-                description: 'display or not the area regular lines',
-                type: 'boolean'
-              }
-            }
-          ],
-          type: 'object'
-        },
-        {
-          name: 'areaStackedLines',
-          props: [
-            {
-              display: {
-                description: 'display or not the area',
-                type: 'boolean'
-              }
-            }
-          ],
-          type: 'object'
-        }
-      ]
-    }),
-    table: {
-      category: 'Graph component',
-      type: { detail: 'control the lines of the graph', summary: 'object' }
-    }
-  },
-  start: {
-    control: 'text',
-    description: 'the beginning of the interval of time to get graph data',
-    name: 'start',
-    table: {
-      category: 'Graph data',
-      type: {
-        detail: 'the beginning of the interval',
-        summary: 'ISOString (required*)'
-      }
-    }
-  },
-  width: {
-    control: 'number',
-    description: 'the width of the graph',
-    table: {
-      category: 'Sizes',
-      type: { summary: 'number' }
-    }
-  },
-  zoomPreview: {
-    control: 'object',
-    description: getDescription({
-      sections: [
-        {
-          name: '',
-          props: [
-            {
-              display: {
-                description: 'enable or not the zoomPreview',
-                type: 'boolean'
-              }
-            }
-          ],
-          type: 'object'
-        }
-      ]
-    }),
-    table: {
-      category: 'Graph interaction',
-      type: {
-        summary: 'apply zoom to a specific zoon'
-      }
-    }
-  }
-};
-
-export const args = {
-  anchorPoint: {
-    areaRegularLinesAnchorPoint: {
-      display: true
-    },
-    areaStackedLinesAnchorPoint: {
-      display: true
-    }
-  },
-  axis: {
-    axisX: { xAxisTickFormat: 'LT' },
-    axisYLeft: { displayUnit: true },
-    axisYRight: { display: true, displayUnit: true }
-  },
-  baseUrl: defaultBaseUrl,
-  end: defaultEnd,
-  height: 500,
-  shapeLines: {
-    areaRegularLines: {
-      display: true
-    },
-    areaStackedLines: {
-      display: true
-    }
-  },
-  start: defaultStart,
-  zoomPreview: {
-    display: true
-  }
-};

package/src/Graph/helpers/index.ts

@@ -1,15 +0,0 @@
-import { prop, propEq, reject, sortBy } from 'ramda';
-
-import { getLineData, getTimeSeries } from '../timeSeries';
-import { LinesData } from '../Lines/models';
-import { GraphData } from '../models';
-
-export const adjustGraphData = (graphData: GraphData): LinesData => {
-  const lines = getLineData(graphData);
-  const sortedLines = sortBy(prop('name'), lines);
-  const displayedLines = reject(propEq('display', false), sortedLines);
-
-  const timeSeries = getTimeSeries(graphData);
-
-  return { lines: displayedLines, timeSeries };
-};

package/src/Graph/index.stories.tsx

@@ -1,30 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import AwesomeTimePeriod from '../TimePeriods';
-
-import { argTypes, args as argumentsData } from './helpers/doc';
-
-import Graph from './index';
-
-const meta: Meta<typeof Graph> = {
-  component: Graph,
-  tags: ['autodocs']
-};
-export default meta;
-
-type Story = StoryObj<typeof Graph>;
-
-const Template: Story = {
-  render: (args) => (
-    <>
-      <AwesomeTimePeriod />
-      <Graph {...args} />
-    </>
-  )
-};
-
-export const Playground: Story = {
-  ...Template,
-  argTypes,
-  args: argumentsData
-};

package/src/Graph/index.tsx

@@ -1,66 +0,0 @@
-import { Responsive } from '@visx/visx';
-import dayjs from 'dayjs';
-import 'dayjs/locale/en';
-import 'dayjs/locale/es';
-import 'dayjs/locale/fr';
-import 'dayjs/locale/pt';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
-
-import Graph from './Graph';
-import { GlobalAreaLines, GraphProps } from './models';
-import useGraphData from './useGraphData';
-
-dayjs.extend(localizedFormat);
-dayjs.extend(utcPlugin);
-dayjs.extend(timezonePlugin);
-
-interface Props extends GraphProps {
-  baseUrl: string;
-  end: string;
-  shapeLines: GlobalAreaLines;
-  start: string;
-}
-
-const WrapperGraph = ({
-  baseUrl,
-  end,
-  start,
-  height,
-  width,
-  shapeLines,
-  axis,
-  anchorPoint,
-  zoomPreview
-}: Props): JSX.Element | null => {
-  const { data, loading } = useGraphData({ baseUrl, end, start });
-
-  if (!data) {
-    return null;
-  }
-
-  return (
-    <div>
-      <Responsive.ParentSize>
-        {({
-          height: responsiveHeight,
-          width: responsiveWidth
-        }): JSX.Element => (
-          <Graph
-            anchorPoint={anchorPoint}
-            axis={axis}
-            graphData={data}
-            height={height ?? responsiveHeight}
-            loading={loading}
-            shapeLines={shapeLines}
-            width={width ?? responsiveWidth}
-            zoomPreview={zoomPreview}
-          />
-        )}
-      </Responsive.ParentSize>
-    </div>
-  );
-};
-
-export default WrapperGraph;

package/src/Graph/models.ts

@@ -1,68 +0,0 @@
-import { Line, Metric, TimeValue } from './timeSeries/models';
-import { AxisX, Axis as AxisYLeft, AxisYRight } from './Axes/models';
-import { AreaRegularLines, AreaStackedLines } from './Lines/models';
-
-export interface GraphData {
-  global;
-  metrics: Array<Metric>;
-  times: Array<string>;
-}
-
-export interface GraphEndpoint {
-  baseUrl: string;
-  queryParameters: GraphParameters;
-}
-export interface Data {
-  baseAxis: number;
-  lines: Array<Line>;
-  queryParameters: GraphParameters;
-  timeSeries: Array<TimeValue>;
-  title: string;
-}
-
-export interface GraphParameters {
-  end: string;
-  start: string;
-}
-
-export interface AnchorPoint {
-  display: boolean;
-}
-
-export interface AreaAnchorPoint {
-  areaRegularLinesAnchorPoint: AnchorPoint;
-  areaStackedLinesAnchorPoint: AnchorPoint;
-}
-
-export interface ShapeLines {
-  areaRegularLines?: AreaRegularLines;
-  areaStackedLines?: AreaStackedLines;
-}
-
-export interface Axis {
-  axisX?: AxisX;
-  axisYLeft?: AxisYLeft;
-  axisYRight?: AxisYRight;
-}
-
-export interface ZoomPreview {
-  [x: string]: unknown;
-  display?: boolean;
-}
-
-export interface GraphProps {
-  anchorPoint?: AreaAnchorPoint;
-  axis?: Axis;
-  height: number;
-  width: number;
-  zoomPreview?: ZoomPreview;
-}
-
-export interface Area {
-  display: boolean;
-}
-
-export interface GlobalAreaLines {
-  areaRegularLines: Area;
-  areaStackedLines: Area;
-}