Dev | Example: Crosshair stacked vs non-stacked data with each XY com…

…ponent

#0

packages/dev/src/examples/auxiliary/crosshair/xy-components/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { VisXYContainer, VisArea, VisCrosshair, VisGroupedBar, VisLine, VisScatter, VisStackedBar } from '@unovis/react'
+import { generateXYDataRecords, XYDataRecord } from '@src/utils/data'
+
+import s from './styles.module.css'
+
+export const title = 'XY Components'
+export const subTitle = 'Stacked vs Non-Stacked data'
+
+export const component = (): JSX.Element => {
+  const data = generateXYDataRecords(10)
+  const x = (d: XYDataRecord): number => d.x
+  const y = (d: XYDataRecord): number | undefined => d.y
+  const yStacked = [
+    (d: XYDataRecord) => d.y,
+    (d: XYDataRecord) => d.y1,
+    (d: XYDataRecord) => d.y2,
+  ]
+  const components = [VisArea, VisGroupedBar, VisLine, VisScatter, VisStackedBar]
+  return (<>
+
+    {components.map(// eslint-disable-next-line @typescript-eslint/naming-convention
+      Component => (
+        <div className={s.componentRow}>
+          {[y, yStacked].map(accessors => (
+            <VisXYContainer data={data}>
+              <Component x={x} y={accessors}/>
+              <VisCrosshair/>
+            </VisXYContainer>
+          ))}
+        </div>
+      ))}
+  </>)
+}

packages/dev/src/examples/auxiliary/crosshair/xy-components/styles.module.css

@@ -0,0 +1,9 @@
+.componentRow {
+  display: flex;
+  width: 100%;
+  height: 150px;
+}
+
+.componentRow > div {
+  width: 50%;
+}