@centreon/ui 24.11.14 → 24.11.21

package/src/Graph/Chart/helpers/doc.ts

@@ -0,0 +1,563 @@
+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}${type && getCustomText(type)}</summary>
+  >`;
+
+interface Prop {
+  description: string;
+  type?: string;
+}
+
+interface Section {
+  description?: string;
+  name: string;
+  props: Array<Record<string, Prop>>;
+  type?: string;
+}
+
+interface Description {
+  sections: Array<Section>;
+}
+
+export const defaultStart = new Date(
+  dayjs(Date.now()).subtract(24, 'hour').toDate().getTime()
+).toISOString();
+
+export const defaultEnd = new Date(Date.now()).toISOString();
+export const defaultLast7days = new Date(
+  dayjs(Date.now()).subtract(7, 'day').toDate().getTime()
+).toISOString();
+
+export const defaultLastMonth = new Date(
+  dayjs(Date.now()).subtract(31, 'day').toDate().getTime()
+).toISOString();
+
+export const zoomPreviewDate = '2023-06-01';
+export const lastDayForwardDate = '2023-06-07';
+
+export const getCustomText = (text: string): string =>
+  `<span style="color:#1EA7FD;fontSize:12px">(${text})</span>`;
+
+export const getBodyDescription = ({ key, description, type }): string => {
+  const body = !type
+    ? `${description} <br>`
+    : `${description} ${getCustomText(type)} <br>`;
+  if (!key) {
+    return body;
+  }
+
+  return `<strong>${key}</strong> : ${body}`;
+};
+
+export const getDescription = ({ sections }: Description): string => {
+  const descriptionBody = sections.map((item) => {
+    const { name, props } = item;
+
+    if (isNil(props) || isEmpty(props)) {
+      return `${getInitialValue({
+        section: name,
+        type: item?.type
+      })}<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: item?.type })
+    );
+
+    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 = [
+  {
+    displayUnit: {
+      description: 'display or not the unit of the axis',
+      type: 'boolean'
+    }
+  }
+];
+
+export const argTypes = {
+  annotationEvent: {
+    control: 'object',
+    description: getDescription({
+      sections: [
+        {
+          name: '',
+          props: [
+            {
+              data: {
+                description:
+                  'if the data is provided , events (comments,downtime,acknowledgement) will be displayed',
+                type: 'array of events'
+              }
+            }
+          ],
+          type: 'object'
+        }
+      ]
+    }),
+    table: {
+      category: 'Graph interaction',
+      type: {
+        summary: 'display events'
+      }
+    }
+  },
+  axis: {
+    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' }
+    }
+  },
+  data: {
+    control: 'object',
+    description: getDescription({
+      sections: [
+        {
+          name: '',
+          props: [
+            {
+              global: {
+                description: 'global data of graph like title ...',
+                type: 'object'
+              }
+            },
+            {
+              metrics: {
+                description: '',
+                type: 'array of object (ds_data)'
+              }
+            },
+            {
+              times: {
+                description: '',
+                type: 'array of dates -iso string-'
+              }
+            }
+          ],
+          type: 'object'
+        }
+      ]
+    }),
+    table: {
+      category: 'Graph data'
+    }
+  },
+
+  displayAnchor: {
+    control: 'object',
+    description: getDescription({
+      sections: [
+        {
+          name: '',
+          props: [
+            {
+              displayGuidingLines: {
+                description: 'displays the guiding lines',
+                type: 'boolean'
+              }
+            },
+            {
+              displayTooltipsGuidingLines: {
+                description:
+                  'displays the tooltips (labels) on the axis bottom/left/right',
+                type: 'boolean'
+              }
+            }
+          ],
+          type: 'object'
+        }
+      ]
+    }),
+    table: {
+      category: 'Graph interaction',
+      type: {
+        summary:
+          'displays or not the guiding lines and the dots for each point of the corresponding graph (line) according to the interaction of the mouse with the graph'
+      }
+    }
+  },
+  end: {
+    control: 'text',
+    description: 'the end of the interval',
+    table: {
+      category: 'Graph data',
+      type: {
+        detail: 'the end of the interval',
+        summary: 'ISOString'
+      }
+    },
+    type: {
+      required: true
+    }
+  },
+  header: {
+    control: 'object',
+    description: getDescription({
+      sections: [
+        {
+          name: '',
+          props: [
+            {
+              displayTitle: {
+                description: 'display or not the title of the graph',
+                type: 'boolean'
+              }
+            },
+            {
+              extraComponent: {
+                description: 'extra component to display on header graph',
+                type: 'React node'
+              }
+            }
+          ],
+          type: 'object'
+        }
+      ]
+    }),
+    table: {
+      category: 'Graph component',
+      type: {
+        summary: 'control header of the graph'
+      }
+    }
+  },
+  height: {
+    control: 'number',
+    description: 'the height of the graph',
+    table: {
+      category: 'Sizes',
+      type: { summary: 'number' }
+    }
+  },
+  legend: {
+    control: 'object',
+    description: getDescription({
+      sections: [
+        {
+          name: '',
+          props: [
+            {
+              display: {
+                description: 'display or not the legend',
+                type: 'boolean'
+              }
+            },
+            {
+              renderExtraComponent: {
+                description: 'extra component to render with legend ',
+                type: 'React node'
+              }
+            }
+          ],
+          type: 'object'
+        }
+      ]
+    }),
+    table: {
+      category: 'Graph component',
+      type: {
+        summary: 'control applying zoom to a specific zoon'
+      }
+    }
+  },
+  loading: {
+    control: 'boolean',
+    description: 'the loading indicator ',
+    table: {
+      category: 'Graph data',
+      type: { summary: 'boolean' }
+    },
+    type: {
+      required: true
+    }
+  },
+  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 stacked lines',
+                type: 'boolean'
+              }
+            }
+          ],
+          type: 'object'
+        },
+        {
+          name: 'areaThresholdLines',
+          props: [
+            {
+              '': {
+                description: getDescription({
+                  sections: [
+                    {
+                      name: 'object',
+                      props: [
+                        {
+                          type: {
+                            description:
+                              'should be variation to render threshold of type variation'
+                          }
+                        },
+                        {
+                          factors: {
+                            description:
+                              'an object of currentFactorMultiplication (the variant to calculate the envelope variation) and the simulatedFactorMultiplication -number-) (the simulated factor of envelope variation -number-) useful for envelopVariation formula',
+                            type: 'required'
+                          }
+                        },
+                        {
+                          getCountDisplayedCircles: {
+                            description:
+                              'callback return the counted circles out of the envelope variation depends on mouse position relative to time value (t)',
+                            type: '(data:number) => void'
+                          }
+                        }
+                      ],
+                      type: 'render threshold of type variation'
+                    },
+                    {
+                      name: 'object',
+                      props: [
+                        {
+                          type: {
+                            description:
+                              'should be variation to render threshold of type pattern'
+                          }
+                        },
+                        {
+                          data: {
+                            description:
+                              'array of graph data ,showing threshold with Patter lines',
+                            type: 'required'
+                          }
+                        }
+                      ],
+                      type: 'render threshold of type pattern'
+                    },
+                    {
+                      name: 'object',
+                      props: [
+                        {
+                          type: {
+                            description:
+                              'should be variation to render threshold of type basic'
+                          }
+                        }
+                      ],
+                      type: 'render threshold of type basic'
+                    }
+                  ]
+                }),
+                type: 'Array of types data (basic | variation | pattern) to render thresholds (can mix multiple)'
+              }
+            }
+          ],
+          type: 'array'
+        }
+      ]
+    }),
+    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 ',
+    name: 'start',
+    table: {
+      category: 'Graph data',
+      type: {
+        detail: 'the beginning of the interval',
+        summary: 'ISOString (required*)'
+      }
+    },
+    type: {
+      required: true
+    }
+  },
+  timeShiftZones: {
+    control: 'object',
+    description: getDescription({
+      sections: [
+        {
+          name: '',
+          props: [
+            {
+              enable: {
+                description: 'enable or not the action drag',
+                type: 'boolean'
+              }
+            },
+            {
+              getInterval: {
+                description:
+                  'callback return the new interval of the graph (end, start) after the action drag',
+                type: '({end,start}) => void'
+              }
+            }
+          ],
+          type: 'object'
+        }
+      ]
+    }),
+    table: {
+      category: 'Graph interaction',
+      type: {
+        summary: 'control applying zoom to a specific zoon'
+      }
+    }
+  },
+  tooltip: {
+    control: 'object',
+    description: getDescription({
+      sections: [
+        {
+          name: '',
+          props: [
+            {
+              renderComponent: {
+                description:
+                  'render function with given props of tooltip data (date of the tooltip position depend on the mouse click , hideTooltip callback to hide tooltip , boolean of is tooltip opened)',
+                type: '({data,hideTooltip,tooltipOpen}) => void , if the component provided the tooltip displays'
+              }
+            }
+          ],
+          type: 'object'
+        }
+      ]
+    }),
+    table: {
+      category: 'Graph interaction',
+      type: {
+        summary: 'control graph tooltip'
+      }
+    }
+  },
+  width: {
+    control: 'number',
+    description: 'the width of the graph',
+    table: {
+      category: 'Sizes',
+      type: { summary: 'number' }
+    }
+  },
+  zoomPreview: {
+    control: 'object',
+    description: getDescription({
+      sections: [
+        {
+          name: '',
+          props: [
+            {
+              enable: {
+                description: 'enable or not the zoomPreview',
+                type: 'boolean'
+              }
+            },
+            {
+              getInterval: {
+                description:
+                  'callback return the new interval of the graph (end, start) after applying zoom',
+                type: '({end,start}) => void'
+              }
+            }
+          ],
+          type: 'object'
+        }
+      ]
+    }),
+    table: {
+      category: 'Graph interaction',
+      type: {
+        summary: 'control applying zoom to a specific zoon'
+      }
+    }
+  }
+};
+
+export const args = {
+  end: defaultEnd,
+  height: 500,
+  loading: false,
+  start: defaultStart
+};

package/src/Graph/Chart/helpers/index.ts

@@ -0,0 +1,66 @@
+import dayjs from 'dayjs';
+import durationPlugin from 'dayjs/plugin/duration';
+import { gt, gte, isEmpty, isNil, prop, propEq, reject, sortBy } from 'ramda';
+
+import type { LineChartData } from '../../common/models';
+import {
+  getLineData,
+  getTimeSeries,
+  getTimeValue
+} from '../../common/timeSeries';
+import type { LinesData } from '../BasicComponents/Lines/models';
+import { dateFormat, timeFormat } from '../common';
+import type { GetDate, GraphInterval } from '../models';
+
+dayjs.extend(durationPlugin);
+
+export const adjustGraphData = (graphData: LineChartData): LinesData => {
+  const lines = getLineData(graphData);
+  const sortedLines = sortBy(prop('name'), lines);
+  const displayedLines = reject(propEq(false, 'display'), sortedLines);
+
+  const timeSeries = getTimeSeries(graphData);
+
+  return { lines: displayedLines, timeSeries };
+};
+
+export const getXAxisTickFormat = (graphInterval: GraphInterval): string => {
+  if (
+    isNil(graphInterval) ||
+    isNil(graphInterval?.start) ||
+    isNil(graphInterval?.end)
+  ) {
+    return timeFormat;
+  }
+  const { end, start } = graphInterval;
+  const numberDays = dayjs.duration(dayjs(end).diff(dayjs(start))).asDays();
+
+  return gte(numberDays, 2) ? dateFormat : timeFormat;
+};
+
+export const truncate = (content?: string): string => {
+  const maxLength = 180;
+
+  if (isNil(content)) {
+    return '';
+  }
+
+  if (gt(content.length, maxLength)) {
+    return `${content.substring(0, maxLength)}...`;
+  }
+
+  return content;
+};
+
+export const displayArea = (data: unknown): boolean =>
+  !isEmpty(data) && !isNil(data);
+
+export const getDate = ({ positionX, xScale, timeSeries }: GetDate): Date => {
+  const timeValue = getTimeValue({
+    timeSeries,
+    x: positionX,
+    xScale
+  });
+
+  return new Date(timeValue?.timeTick || 0);
+};