Component | Plotband: Add plotband component

packages/angular/gallery/src/main.ts

@@ -50,6 +50,7 @@ import { CrosshairStackedBarModule } from '@unovis/shared/examples/crosshair-sta
 import { BrushGroupedBarModule } from '@unovis/shared/examples/brush-grouped-bar/brush-grouped-bar.module'
 import { FreeBrushScattersModule } from '@unovis/shared/examples/free-brush-scatters/free-brush-scatters.module'
 import { BaselineAreaChartModule } from '@unovis/shared/examples/baseline-area-chart/baseline-area-chart.module'
+import { BasicPlotbandModule } from '@unovis/shared/examples/basic-plotband/basic-plotband.module'
 
 @Component({
   selector: 'app-component',
@@ -114,7 +115,7 @@ export class AppComponent {
     TopojsonMapModule, StackedBarChartModule, BrushGroupedBarModule, BasicScatterPlotModule, SizedScatterPlotModule, FreeBrushScattersModule, NonStackedAreaChartModule,
     BasicTimelineModule, BasicSankeyModule, ExpandableSankeyModule, BasicGraphModule, LeafletFlowMapModule,
     ForceLayoutGraphModule, AdvancedLeafletMapModule, StackedAreaModule, ParallelLayoutGraphModule, ElkLayeredGraphModule,
-    DataGapLineChartModule, CrosshairStackedBarModule, BaselineAreaChartModule, StepAreaChartModule, SunburstChartModule,
+    DataGapLineChartModule, CrosshairStackedBarModule, BaselineAreaChartModule, StepAreaChartModule, SunburstChartModule, BasicPlotbandModule,
   ],
   bootstrap: [AppComponent],
   providers: [BrowserModule],

packages/angular/src/components.ts

@@ -56,6 +56,9 @@ export { VisXYLabelsModule } from './components/xy-labels/xy-labels.module'
 export { VisTopoJSONMapComponent } from './components/topojson-map/topojson-map.component'
 export { VisTopoJSONMapModule } from './components/topojson-map/topojson-map.module'
 
+export { VisPlotbandComponent } from './components/plotband/plotband.component'
+export { VisPlotbandModule } from './components/plotband/plotband.module'
+
 // HTML Components
 export { VisLeafletMapComponent } from './html-components/leaflet-map/leaflet-map.component'
 export { VisLeafletMapModule } from './html-components/leaflet-map/leaflet-map.module'

packages/angular/src/components/plotband/plotband.component.ts

@@ -0,0 +1,124 @@
+// !!! This code was automatically generated. You should not change it !!!
+import { Component, AfterViewInit, Input, SimpleChanges } from '@angular/core'
+import {
+  Plotband,
+  PlotbandConfigInterface,
+  ContainerCore,
+  VisEventType,
+  VisEventCallback,
+  AxisType,
+  PlotbandLabelPosition,
+  PlotbandLabelOrientation,
+} from '@unovis/ts'
+import { VisXYComponent } from '../../core'
+
+@Component({
+  selector: 'vis-plotband',
+  template: '',
+  // eslint-disable-next-line no-use-before-define
+  providers: [{ provide: VisXYComponent, useExisting: VisPlotbandComponent }],
+})
+export class VisPlotbandComponent<Datum> implements PlotbandConfigInterface<Datum>, AfterViewInit {
+  /** Duration of the animation in milliseconds. */
+  @Input() duration?: number
+
+  /** Events configuration. An object containing properties in the following format:
+   *
+   * ```
+   * {
+   * \[selectorString]: {
+   *     \[eventType]: callbackFunction
+   *  }
+   * }
+   * ```
+   * e.g.:
+   * ```
+   * {
+   * \[Area.selectors.area]: {
+   *    click: (d) => console.log("Clicked Area", d)
+   *  }
+   * }
+   * ``` */
+  @Input() events?: {
+    [selector: string]: {
+      [eventType in VisEventType]?: VisEventCallback
+    };
+  }
+
+  /** You can set every SVG and HTML visualization object to have a custom DOM attributes, which is useful
+   * when you want to do unit or end-to-end testing. Attributes configuration object has the following structure:
+   *
+   * ```
+   * {
+   * \[selectorString]: {
+   *     \[attributeName]: attribute constant value or accessor function
+   *  }
+   * }
+   * ```
+   * e.g.:
+   * ```
+   * {
+   * \[Area.selectors.area]: {
+   *    "test-value": d => d.value
+   *  }
+   * }
+   * ``` */
+  @Input() attributes?: {
+    [selector: string]: {
+      [attr: string]: string | number | boolean | ((datum: any) => string | number | boolean);
+    };
+  }
+
+  /** Axis to draw the plotband on. */
+  @Input() axis?: AxisType
+
+  /** Start coordinate for the plotband. */
+  @Input() from?: number | null | undefined
+
+  /** End coordinate for the plotband. */
+  @Input() to?: number | null | undefined
+
+  /** Optional text to display on the plotband */
+  @Input() labelText?: string
+
+  /** Position of the label relative to the plotband area (e.g., 'top-left-outside').
+   * Can be customized with a string. */
+  @Input() labelPosition?: PlotbandLabelPosition
+
+  /** Horizontal offset (in pixels) for positioning the label. */
+  @Input() labelOffsetX?: number
+
+  /** Vertical offset (in pixels) for positioning the label. */
+  @Input() labelOffsetY?: number
+
+  /** Orientation of the label text. */
+  @Input() labelOrientation?: PlotbandLabelOrientation
+
+  /** Optional color for the label text */
+  @Input() labelColor?: string
+
+  /** Font size (in pixels) for the label text.
+   * Uses the CSS variable `--vis-plotband-label-font-size` by default, which resolves to `12px`. */
+  @Input() labelSize?: number
+
+  component: Plotband<Datum> | undefined
+  public componentContainer: ContainerCore | undefined
+
+  ngAfterViewInit (): void {
+    this.component = new Plotband<Datum>(this.getConfig())
+  }
+
+  ngOnChanges (changes: SimpleChanges): void {
+    this.component?.setConfig(this.getConfig())
+    this.componentContainer?.render()
+  }
+
+  private getConfig (): PlotbandConfigInterface<Datum> {
+    const { duration, events, attributes, axis, from, to, labelText, labelPosition, labelOffsetX, labelOffsetY, labelOrientation, labelColor, labelSize } = this
+    const config = { duration, events, attributes, axis, from, to, labelText, labelPosition, labelOffsetX, labelOffsetY, labelOrientation, labelColor, labelSize }
+    const keys = Object.keys(config) as (keyof PlotbandConfigInterface<Datum>)[]
+    keys.forEach(key => { if (config[key] === undefined) delete config[key] })
+
+    return config
+  }
+}

packages/angular/src/components/plotband/plotband.module.ts

@@ -0,0 +1,10 @@
+// !!! This code was automatically generated. You should not change it !!!
+import { NgModule } from '@angular/core'
+import { VisPlotbandComponent } from './plotband.component'
+
+@NgModule({
+  imports: [],
+  declarations: [VisPlotbandComponent],
+  exports: [VisPlotbandComponent],
+})
+export class VisPlotbandModule {}

packages/dev/src/examples/xy-components/plotband/index.tsx

@@ -0,0 +1,181 @@
+import { ExampleViewerDurationProps } from '@src/components/ExampleViewer/index'
+import { generateXYDataRecords, XYDataRecord } from '@src/utils/data'
+import { VisAxis, VisCrosshair, VisLine, VisPlotband, VisTooltip, VisXYContainer } from '@unovis/react'
+import { PlotbandLabelOrientation, PlotbandLabelPosition } from '@unovis/ts'
+import React, { useRef, useState } from 'react'
+import s from './style.module.css'
+
+export const title = 'Plotband'
+export const subTitle = 'Plot a band using the Plotband component'
+
+const data = generateXYDataRecords(15)
+
+export const component = (props: ExampleViewerDurationProps): React.ReactNode => {
+  const tooltipRef = useRef(null)
+  const accessors = [
+    (d: XYDataRecord) => d.y,
+    (d: XYDataRecord) => d.y1,
+    (d: XYDataRecord) => d.y2,
+    () => Math.random(),
+    () => Math.random(),
+  ]
+  const axis = ['x', 'y']
+
+  const textOrientation: PlotbandLabelOrientation[] = [
+    PlotbandLabelOrientation.Horizontal,
+    PlotbandLabelOrientation.Vertical,
+  ]
+  const textPosition: PlotbandLabelPosition[] = [
+    PlotbandLabelPosition.TopLeftOutside,
+    PlotbandLabelPosition.TopLeftInside,
+    PlotbandLabelPosition.TopInside,
+    PlotbandLabelPosition.TopOutside,
+    PlotbandLabelPosition.TopRightInside,
+    PlotbandLabelPosition.TopRightOutside,
+    PlotbandLabelPosition.RightInside,
+    PlotbandLabelPosition.RightOutside,
+    PlotbandLabelPosition.BottomRightInside,
+    PlotbandLabelPosition.BottomRightOutside,
+    PlotbandLabelPosition.BottomInside,
+    PlotbandLabelPosition.BottomOutside,
+    PlotbandLabelPosition.BottomLeftInside,
+    PlotbandLabelPosition.BottomLeftOutside,
+    PlotbandLabelPosition.LeftInside,
+    PlotbandLabelPosition.LeftOutside,
+  ]
+  const [plotbandAxis, setPlotbandAxis] = useState(axis[1])
+  const [plotbandFrom, setPlotbandFrom] = useState(2)
+  const [plotbandTo, setPlotbandTo] = useState(3)
+  const [plotbandColor, setPlotbandColor] = useState('#ff8400')
+  const [plotbandColorAlpha, setPlotbandColorAlpha] = useState(0.2)
+
+  const [plotbandText, setPlotbandText] = useState('x label')
+  const [plotbandTextPosition, setPlotbandTextPosition] = useState(textPosition[0])
+  const [plotbandTextOffsetX, setPlotbandTextOffsetX] = useState(14)
+  const [plotbandTextOffsetY, setPlotbandTextOffsetY] = useState(14)
+  const [plotbandTextOrientation, setPlotbandTextOrientation] = useState(textOrientation[1])
+  const [plotbandLabelColor, setPlotbandLabelColor] = useState()
+  const [plotbandLabelSize, setPlotbandLabelSize] = useState(12)
+
+  function formPlotbandFinalColor (color: string | undefined, alpha: number): string | undefined {
+    if (!color || !/^#?[0-9A-Fa-f]{6}$/.test(color)) return undefined
+
+    const hex = color.replace('#', '')
+    const r = parseInt(hex.slice(0, 2), 16)
+    const g = parseInt(hex.slice(2, 4), 16)
+    const b = parseInt(hex.slice(4, 6), 16)
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  }
+
+  const finalColor = formPlotbandFinalColor(plotbandColor, plotbandColorAlpha)
+
+  return (
+    <>
+      <div>
+        <div>
+          <h3>Plotband Props</h3>
+          <div className={s.controls}>
+            <label>
+               Axis:
+              <select
+                value={axis.indexOf(plotbandAxis)}
+                onChange={e => setPlotbandAxis(axis[Number(e.target.value)])}
+              >
+                {axis.map((o, i) => <option key={i} value={i}>{String(o)}</option>)}
+              </select>
+            </label>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+              <label>
+                Color ({plotbandColor}):
+                <input
+                  type='color'
+                  value={plotbandColor ?? '#000000'}
+                  onChange={e => setPlotbandColor(e.target.value)}
+                />
+                <button onClick={() => setPlotbandColor(undefined)}>Clear</button>
+              </label>
+              <label>
+                Color Alpha ({plotbandColorAlpha})
+                <input type='range' min={0} max={1} step="0.1" value={plotbandColorAlpha} onChange={e => setPlotbandColorAlpha(Number(e.target.value))}/>
+              </label>
+            </div>
+            <label>
+              From ({plotbandFrom}):
+              <input type='range' min={1} max={5} value={plotbandFrom} onChange={e => setPlotbandFrom(Number(e.target.value))}/>
+            </label>
+            <label>
+              To ({plotbandTo}):
+              <input type='range' min={1} max={10} step="0.5" value={plotbandTo} onChange={e => setPlotbandTo(Number(e.target.value))}/>
+            </label>
+          </div>
+        </div>
+        <div>
+          <h3>Label Props</h3>
+          <div className={s.controls}>
+            <label>
+              Text:
+              <input type='text' value={plotbandText} onChange={e => setPlotbandText(e.target.value)}/>
+            </label>
+            <label>
+              Position:
+              <select value={plotbandTextPosition} onChange={e => setPlotbandTextPosition(e.target.value)}>
+                {textPosition.map((position, index) => (
+                  <option key={index} value={position}>{position}</option>
+                ))}
+              </select>
+            </label>
+            <label>
+              Offset X:
+              <input type='range' min={0} max={50} value={plotbandTextOffsetX} onChange={e => setPlotbandTextOffsetX(Number(e.target.value))}/>
+              ({plotbandTextOffsetX})
+            </label>
+            <label>
+              Offset Y:
+              <input type='range' min={0} max={50} value={plotbandTextOffsetY} onChange={e => setPlotbandTextOffsetY(Number(e.target.value))}/>
+              ({plotbandTextOffsetY})
+            </label>
+            <label>
+              Orientation:
+              <select value={plotbandTextOrientation} onChange={e => setPlotbandTextOrientation(e.target.value)}>
+                {textOrientation.map((position, index) => (
+                  <option key={index} value={position}>{position}</option>
+                ))}
+              </select>
+            </label>
+            <label>
+              Color ({plotbandLabelColor}):
+              <input type='color' value={plotbandColor} onChange={e => setPlotbandLabelColor(e.target.value)}/>
+              <button onClick={() => setPlotbandLabelColor(undefined)}>Clear</button>
+            </label>
+            <label>
+              Label Size ({plotbandLabelSize}):
+              <input type='range' min={10} max={20} value={plotbandLabelSize} onChange={e => setPlotbandLabelSize(Number(e.target.value))}/>
+            </label>
+          </div>
+        </div>
+      </div>
+      <div>
+        <VisXYContainer<XYDataRecord> data={data}>
+          <VisPlotband
+            axis={plotbandAxis}
+            color={finalColor}
+            from={plotbandFrom}
+            to={plotbandTo}
+            labelText={plotbandText}
+            labelPosition={plotbandTextPosition}
+            labelOffsetX={plotbandTextOffsetX}
+            labelOffsetY={plotbandTextOffsetY}
+            labelOrientation={plotbandTextOrientation}
+            labelColor={plotbandLabelColor}
+            labelSize={plotbandLabelSize}
+          />
+          <VisLine x={d => d.x} y={accessors} duration={props.duration}/>
+          <VisAxis type='x' numTicks={15} tickFormat={(x: number) => `${x}`} duration={props.duration}/>
+          <VisAxis type='y' tickFormat={(y: number) => `${y}`} duration={props.duration}/>
+          <VisCrosshair template={(d: XYDataRecord) => `${d.x}`} />
+          <VisTooltip ref={tooltipRef} />
+        </VisXYContainer>
+      </div>
+    </>
+  )
+}

packages/dev/src/examples/xy-components/plotband/style.module.css

@@ -0,0 +1,5 @@
+.controls {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 1rem;
+}

packages/react/src/components.ts

@@ -18,6 +18,7 @@ export * from './components/timeline/'
 export * from './components/topojson-map/'
 export * from './components/xy-labels'
 export * from './components/annotations'
+export * from './components/plotband'
 
 // HTML Components
 export * from './html-components/bullet-legend'