Website update

package.json

@@ -1,6 +1,6 @@
 {
   "name": "unovis",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "license": "Apache-2.0",
   "private": true,
   "workspaces": [

packages/angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unovis/angular",
   "description": "Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/f5/unovis.git",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@unovis/shared": "*",
-    "@unovis/ts": "1.3.1",
+    "@unovis/ts": "1.3.3",
     "@angular/common": "12 - 16",
     "@angular/compiler": "12 - 16",
     "@angular/core": "12 - 16"

packages/angular/src/components.ts

@@ -2,9 +2,6 @@
 export * from './core'
 
 // SVG Components
-export { VisLineComponent } from './components/line/line.component'
-export { VisLineModule } from './components/line/line.module'
-
 export { VisAreaComponent } from './components/area/area.component'
 export { VisAreaModule } from './components/area/area.module'
 
@@ -14,18 +11,33 @@ export { VisAxisModule } from './components/axis/axis.module'
 export { VisBrushComponent } from './components/brush/brush.component'
 export { VisBrushModule } from './components/brush/brush.module'
 
-export { VisFreeBrushComponent } from './components/free-brush/free-brush.component'
-export { VisFreeBrushModule } from './components/free-brush/free-brush.module'
+export { VisChordDiagramComponent } from './components/chord-diagram/chord-diagram.component'
+export { VisChordDiagramModule } from './components/chord-diagram/chord-diagram.module'
 
 export { VisCrosshairComponent } from './components/crosshair/crosshair.component'
 export { VisCrosshairModule } from './components/crosshair/crosshair.module'
 
 export { VisDonutComponent } from './components/donut/donut.component'
 export { VisDonutModule } from './components/donut/donut.module'
 
+export { VisFreeBrushComponent } from './components/free-brush/free-brush.component'
+export { VisFreeBrushModule } from './components/free-brush/free-brush.module'
+
+export { VisGraphComponent } from './components/graph/graph.component'
+export { VisGraphModule } from './components/graph/graph.module'
+
 export { VisGroupedBarComponent } from './components/grouped-bar/grouped-bar.component'
 export { VisGroupedBarModule } from './components/grouped-bar/grouped-bar.module'
 
+export { VisLineComponent } from './components/line/line.component'
+export { VisLineModule } from './components/line/line.module'
+
+export { VisNestedDonutComponent } from './components/nested-donut/nested-donut.component'
+export { VisNestedDonutModule } from './components/nested-donut/nested-donut.module'
+
+export { VisSankeyComponent } from './components/sankey/sankey.component'
+export { VisSankeyModule } from './components/sankey/sankey.module'
+
 export { VisScatterComponent } from './components/scatter/scatter.component'
 export { VisScatterModule } from './components/scatter/scatter.module'
 
@@ -41,15 +53,6 @@ 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 { VisSankeyComponent } from './components/sankey/sankey.component'
-export { VisSankeyModule } from './components/sankey/sankey.module'
-
-export { VisGraphComponent } from './components/graph/graph.component'
-export { VisGraphModule } from './components/graph/graph.module'
-
-export { VisNestedDonutComponent } from './components/nested-donut/nested-donut.component'
-export { VisNestedDonutModule } from './components/nested-donut/nested-donut.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/chord-diagram/chord-diagram.component.ts

@@ -105,8 +105,8 @@ export class VisChordDiagramComponent<N extends ChordInputNode, L extends ChordI
   /** Node label alignment. Default: `ChordLabelAlignment.Along` */
   @Input() nodeLabelAlignment?: GenericAccessor<ChordLabelAlignment | string, ChordNodeDatum<N>>
 
-  /** Pad angle in radians. Constant value or accessor function. Default: `0.02` */
-  @Input() padAngle?: NumericAccessor<ChordNodeDatum<N>>
+  /** Pad angle in radians. Default: `0.02` */
+  @Input() padAngle?: number
 
   /** Corner radius constant value or accessor function. Default: `2` */
   @Input() cornerRadius?: NumericAccessor<ChordNodeDatum<N>>

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/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unovis/react",
   "description": "Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/f5/unovis.git",
@@ -35,7 +35,7 @@
     "publish:dist": "rm -rf dist/.cache; cp ./{LICENSE,README.md,package.json} ./dist; cd ./dist; npm publish"
   },
   "peerDependencies": {
-    "@unovis/ts": "1.3.1",
+    "@unovis/ts": "1.3.3",
     "react": ">=16.8.0 || ^17 || ^18",
     "react-dom": ">=16.8.0 || ^17 || ^18"
   },

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>
+    </>
+  )
+}