BulletLegend improvements and new scatter plot examples

packages/angular/src/html-components/bullet-legend/bullet-legend.component.ts

@@ -1,5 +1,5 @@
 import { Component, AfterViewInit, Input, SimpleChanges, ViewChild, ElementRef } from '@angular/core'
-import { BulletLegend, BulletLegendConfigInterface, BulletLegendItemInterface, BulletShape } from '@unovis/ts'
+import { BulletLegend, BulletLegendConfigInterface, BulletLegendItemInterface, BulletShape, GenericAccessor } from '@unovis/ts'
 import { VisGenericComponent } from '../../core'
 
 @Component({
@@ -39,8 +39,8 @@ export class VisBulletLegendComponent implements BulletLegendConfigInterface, Af
   /** Bullet circle size, mapped to the width and height CSS properties. Default: `null` */
   @Input() bulletSize?: string | null
 
-  /** Bullet shape: `BulletShape.Circle`, `BulletShape.Line` or `BulletShape.Square`. Default: `BulletShape.Circle` */
-  @Input() bulletShape?: BulletShape
+  /** Bullet shape enum value or accessor function. Default: `d => d.shape ?? BulletShape.Circle */
+  @Input() bulletShape?: GenericAccessor<BulletShape, BulletLegendItemInterface>
 
   component: BulletLegend | undefined
 

packages/dev/src/examples/auxiliary/bullet-legend/multi-shape-legend/index.tsx

@@ -0,0 +1,43 @@
+import React, { useState, useCallback, useEffect } from 'react'
+import { BulletLegendItemInterface, BulletShape } from '@unovis/ts'
+import { VisBulletLegend, VisXYContainer, VisScatter, VisAxis } from '@unovis/react'
+import { generateStackedDataRecords, StackedDataRecord } from '@src/utils/data'
+
+export const title = 'Shape Legend'
+export const subTitle = 'with Scatter Plot'
+
+const STACKED = 7
+const data = generateStackedDataRecords(10, STACKED)
+const items = Array(STACKED).fill(0).map((_, i) => ({ name: `Y${i}`, inactive: false }))
+const shapes = Object.values(BulletShape)
+
+export const component = (): JSX.Element => {
+  const x = (d: StackedDataRecord): number => d.x
+  const shape = (_, i: number): string => shapes[i % shapes.length]
+
+  const [accessors, setAccessors] = useState<(null | ((d: StackedDataRecord) => number))[]>()
+  const [legendItems, setLegendItems] = useState(items)
+
+  const toggleItem = useCallback((_: BulletLegendItemInterface, index: number) => {
+    const newItems = legendItems.map((l, i) => i === index ? ({ ...l, inactive: !l.inactive }) : l)
+    setLegendItems(newItems)
+  }, [legendItems])
+
+  useEffect(() =>
+    setAccessors(legendItems.map((l, i) => l.inactive ? null : (d: StackedDataRecord) => d.ys[i]))
+  , [legendItems])
+
+  return (<>
+    <VisBulletLegend
+      items={legendItems}
+      bulletShape={shape}
+      onLegendItemClick={toggleItem}
+    />
+    <VisXYContainer>
+      <VisScatter data={data} x={x} y={accessors} shape={shape}/>
+      <VisAxis type='x'/>
+      <VisAxis type='y'/>
+    </VisXYContainer>
+  </>
+  )
+}

packages/shared/examples/basic-scatter-plot/basic-scatter-plot.component.html

@@ -0,0 +1,6 @@
+<vis-bullet-legend [items]="legendItems"></vis-bullet-legend>
+<vis-xy-container [data]="data" [height]="600">
+  <vis-scatter [x]="x" [y]="y" [color]="color" [size]="8"></vis-scatter>
+  <vis-axis type="x" label="Beak Length (mm)"></vis-axis>
+  <vis-axis type="y" label="Flipper Length (mm)"></vis-axis>
+</vis-xy-container>

packages/shared/examples/basic-scatter-plot/basic-scatter-plot.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core'
+import type { BulletLegendItemInterface, NumericAccessor, StringAccessor } from '@unovis/ts'
+import { data, DataRecord } from './data'
+
+@Component({
+  selector: 'basic-scatter-plot',
+  templateUrl: './basic-scatter-plot.component.html',
+})
+export class BasicScatterPlotComponent {
+  data = data
+
+  legendItems: BulletLegendItemInterface[] = [
+    { name: 'Male', color: '#1fc3aa' },
+    { name: 'Female', color: '#8624F5' },
+    { name: 'No Data', color: '#aaa' },
+  ]
+
+  x: NumericAccessor<DataRecord> = d => d.beakLength
+  y: NumericAccessor<DataRecord> = d => d.flipperLength
+  color: StringAccessor<DataRecord> = d => this.legendItems.find(i => i.name === (d.sex ?? 'No Data'))?.color
+}

packages/shared/examples/basic-scatter-plot/basic-scatter-plot.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core'
+import { VisXYContainerModule, VisScatterModule, VisAxisModule, VisBulletLegendModule } from '@unovis/angular'
+
+import { BasicScatterPlotComponent } from './basic-scatter-plot.component'
+
+@NgModule({
+  imports: [VisXYContainerModule, VisScatterModule, VisAxisModule, VisBulletLegendModule],
+  declarations: [BasicScatterPlotComponent],
+  exports: [BasicScatterPlotComponent],
+})
+export class BasicScatterPlotModule { }

packages/shared/examples/basic-scatter-plot/basic-scatter-plot.svelte

@@ -0,0 +1,23 @@
+<script lang='ts'>
+  import type { NumericAccessor, StringAccessor } from '@unovis/ts'
+  import { VisXYContainer, VisScatter, VisAxis, VisBulletLegend } from '@unovis/svelte'
+  import { data, DataRecord } from './data'
+
+  const legendItems = [
+    { name: 'Male', color: '#1fc3aa' },
+    { name: 'Female', color: '#8624F5' },
+    { name: 'No Data', color: '#aaa' },
+  ]
+
+  const x: NumericAccessor<DataRecord> = d => d.beakLength
+  const y: NumericAccessor<DataRecord> = d => d.flipperLength
+  const color: StringAccessor<DataRecord> = d => legendItems.find(i => i.name === (d.sex ?? 'No Data'))?.color
+
+</script>
+
+<VisBulletLegend items={legendItems}/>
+<VisXYContainer data={data} height={'60vh'}>
+  <VisScatter x={x} y={y} size={8} color={color}/>
+  <VisAxis type='x' label={'Beak Length (mm)'} />
+  <VisAxis type='y' label={'Flipper Length (mm)'}/>
+</VisXYContainer>

packages/shared/examples/basic-scatter-plot/basic-scatter-plot.ts

@@ -0,0 +1,28 @@
+import { Axis, BulletLegend, Scatter, XYContainer } from '@unovis/ts'
+import { data, DataRecord } from './data'
+
+const container = document.getElementById('vis-container')
+
+// Legend
+const legend = new BulletLegend(container, {
+  items: [
+    { name: 'Male', color: '#1fc3aa' },
+    { name: 'Female', color: '#8624F5' },
+    { name: 'No Data', color: '#aaa' },
+  ],
+})
+
+// Chart
+const chart = new XYContainer<DataRecord>(container, {
+  height: 600,
+  components: [
+    new Scatter({
+      x: (d: DataRecord) => d.beakLength,
+      y: (d: DataRecord) => d.flipperLength,
+      color: (d: DataRecord) => legend.config.items.find(i => i.name === (d.sex ?? 'No Data'))?.color,
+      size: 8,
+    }),
+  ],
+  xAxis: new Axis({ label: 'Beak Length (mm)' }),
+  yAxis: new Axis({ label: 'Flipper Length (mm)' }),
+}, data)

packages/shared/examples/basic-scatter-plot/basic-scatter-plot.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { NumericAccessor, StringAccessor } from '@unovis/ts'
+import { VisAxis, VisBulletLegend, VisScatter, VisXYContainer } from '@unovis/react'
+import { data, DataRecord } from './data'
+
+export default function BasicScatterPlot (): JSX.Element {
+  const legendItems = [
+    { name: 'Male', color: '#1fc3aa' },
+    { name: 'Female', color: '#8624F5' },
+    { name: 'No Data', color: '#aaa' },
+  ]
+
+  const x: NumericAccessor<DataRecord> = d => d.beakLength
+  const y: NumericAccessor<DataRecord> = d => d.flipperLength
+  const color: StringAccessor<DataRecord> = d => legendItems.find(i => i.name === (d.sex ?? 'No Data'))?.color
+
+  return (
+    <>
+      <VisBulletLegend items={legendItems}/>
+      <VisXYContainer data={data} height={'60vh'}>
+        <VisScatter x={x} y={y} size={8} color={color}/>
+        <VisAxis type='x' label={'Beak Length (mm)'} />
+        <VisAxis type='y' label={'Flipper Length (mm)'}/>
+      </VisXYContainer>
+    </>
+  )
+}

packages/shared/examples/basic-scatter-plot/basic-scatter-plot.vue

@@ -0,0 +1,24 @@
+<script lang='ts'>
+import type { NumericAccessor, StringAccessor } from '@unovis/ts'
+import { VisXYContainer, VisScatter, VisAxis, VisBulletLegend } from '@unovis/svelte'
+import { data, DataRecord } from './data'
+
+const legendItems = [
+  { name: 'Male', color: '#1fc3aa' },
+  { name: 'Female', color: '#8624F5' },
+  { name: 'No Data', color: '#aaa' },
+]
+
+const x: NumericAccessor<DataRecord> = d => d.beakLength
+const y: NumericAccessor<DataRecord> = d => d.flipperLength
+const color: StringAccessor<DataRecord> = d => legendItems.find(i => i.name === (d.sex ?? 'No Data'))?.color
+</script>
+
+<template>
+  <VisBulletLegend :items="legendItems"/>
+  <VisXYContainer :data="data" :height="600">
+    <VisScatter :x="x" :y="y" :color="color" :size="8"/>
+    <VisAxis type='x' label='Beak Length (mm)' />
+    <VisAxis type='y' label='Flipper Length (mm)'/>
+  </VisXYContainer>
+</template>