Website | Gallery: Add Dual Axis Chart

packages/shared/examples/dual-axis-chart/dual-axis-chart.component.html

@@ -1,11 +1,35 @@
-<vis-bullet-legend [items]="legendItems"></vis-bullet-legend>
-<vis-xy-container [data]="data" [height]="500">
-    <vis-area [x]="x" [y]="y" [baseline]="baseline" [curveType]="curveType"></vis-area>
-    <vis-axis type="x" label="Year"></vis-axis>
-    <vis-axis
-      type="y"
-      label="Number of Mentions"
-      [tickValues]="tickValues"
-      [tickFormat]="tickFormat"
-    ></vis-axis>
-</vis-xy-container>
+<vis-xy-container
+  [data]="data"
+  [margin]="margin"
+  [autoMargin]="false"
+  [width]="'100%'"
+  [height]="'40vh'"
+>
+  <vis-area [x]="chartX" [y]="chartAY" opacity="0.9" color='#FF6B7E'/>
+  <vis-axis type='x' [numTicks]="3" [tickFormat]="xTicks" label="Time"/>
+  <vis-axis type='y'
+    [tickFormat]="chartAYTicks"
+    [tickTextWidth]="60"
+    [tickTextColor]="'#FF6B7E'"
+    [labelColor]="'#FF6B7E'"
+    label="Traffic"
+  />
+  </vis-xy-container>
+<vis-xy-container
+  [data]="data"
+  [yDomain]="[0, 150]"
+  [margin]="margin"
+  [autoMargin]="false"
+  [style]="style"
+>
+  <vis-line [x]="chartX" [y]="chartBY"/>
+  <vis-axis
+    type="y"
+    [position]="'right'"
+    [tickFormat]="chartBYTicks"
+    [gridLine]="false"
+    [tickTextColor]="'#4D8CFD'"
+    [labelColor]="'#4D8CFD'"
+    label="Signal Strength"
+  />
+</vis-xy-container>

packages/shared/examples/dual-axis-chart/dual-axis-chart.component.ts

@@ -1,29 +1,20 @@
 import { Component } from '@angular/core'
-import { CurveType } from '@unovis/ts'
-import { data, categories, Category, DataRecord } from './data'
+import { XYDataRecord, generateXYDataRecords } from './data'
 
 @Component({
   selector: 'dual-axis-chart',
   templateUrl: './dual-axis-chart.component.html',
 })
 export class DualAxisChartComponent {
-  data = data
-  legendItems = categories
-  sums = data.map(d => d.art.reduce((t, i) => t + i, 0))
-  max: number = Math.max(...this.sums)
+  data = generateXYDataRecords(150)
 
-  // Area
-  x = (d: DataRecord): number => d.year
-  y = categories.map((c: Category) => d => d.art[c.id])
-  color = categories.map((c: Category): string => c.color)
-  baseline = (_: DataRecord, i: number): number => (this.max - this.sums[i]) / 2
-  curveType = CurveType.Basis
+  margin = { left: 100, right: 100, top: 40, bottom: 60 }
+  style = { position: 'absolute', top: 0, left: 0, width: '100%', height: '40vh' }
 
-  // Y Axis
-  tickValues = Array<number>(Math.round(this.max / 1000)).fill(0).map((_, i) => {
-    const dir = i % 2 === 1 ? -(i - 1) : i
-    return this.max / 2 + dir * 1000
-  })
-
-  tickFormat = (i: number): string => `${Math.abs(i - this.max / 2)}`
+  chartX = (d: XYDataRecord): number => d.x
+  chartAY = (d: XYDataRecord, i: number): number => i * (d.y || 0)
+  chartBY = (d: XYDataRecord): number => 20 + 10 * (d.y2 || 0)
+  xTicks = (x: number): string => `${x}ms`
+  chartAYTicks = (y: number): string => `${y}bps`
+  chartBYTicks = (y: number): string => `${y}db`
 }

packages/shared/examples/dual-axis-chart/dual-axis-chart.module.ts

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core'
-import { VisXYContainerModule, VisAxisModule, VisBulletLegendModule, VisAreaModule } from '@unovis/angular'
+import { VisXYContainerModule, VisAxisModule, VisLineModule, VisAreaModule } from '@unovis/angular'
 
 import { DualAxisChartComponent } from './dual-axis-chart.component'
 
 @NgModule({
-  imports: [VisXYContainerModule, VisAreaModule, VisAxisModule, VisBulletLegendModule],
+  imports: [VisXYContainerModule, VisAreaModule, VisAxisModule, VisLineModule],
   declarations: [DualAxisChartComponent],
   exports: [DualAxisChartComponent],
 })

packages/shared/examples/dual-axis-chart/dual-axis-chart.svelte

@@ -22,7 +22,7 @@
     width= {'100%'}
     height= {'40vh'}
   >
-    <VisArea x={chartX} y={chartAY} opacity={0.9} color={'#FF6B7E'}/>
+    <VisArea x={chartX} y={chartAY} opacity={0.9} color={'#FF6B7E'} />
     <VisAxis type='x' numTicks={3} tickFormat={xTicks} label='Time'/>
     <VisAxis type='y'
       tickFormat={chartAYTicks}
@@ -41,7 +41,7 @@
     height= {'40vh'}
     class={'chartContainer'}
   >
-    <VisLine x={chartX} y={chartBY}/>
+    <VisLine x={chartX} y={chartBY} />
     <VisAxis
       type='y'
       position={'right'}

packages/shared/examples/dual-axis-chart/dual-axis-chart.tsx

@@ -14,8 +14,8 @@ export default function component (): JSX.Element {
       width= {'100%'}
       height= {'40vh'}
     >
-      <VisArea<XYDataRecord> x={d => d.x} y={(d: XYDataRecord, i: number) => i * (d.y || 0)} opacity={0.9} color='#FF6B7E'/>
-      <VisAxis type='x' numTicks={3} tickFormat={(x: number) => `${x}ms`} label='Time'/>
+      <VisArea<XYDataRecord> x={d => d.x} y={(d: XYDataRecord, i: number) => i * (d.y || 0)} opacity={0.9} color='#FF6B7E' />
+      <VisAxis type='x' numTicks={3} tickFormat={(x: number) => `${x}ms`} label='Time' />
       <VisAxis type='y'
         tickFormat={(y: number) => `${y}bps`}
         tickTextWidth={60}
@@ -31,7 +31,7 @@ export default function component (): JSX.Element {
       autoMargin={false}
       style={style}
     >
-      <VisLine<XYDataRecord> x={d => d.x} y={d => 20 + 10 * (d.y2 || 0)}/>
+      <VisLine<XYDataRecord> x={d => d.x} y={d => 20 + 10 * (d.y2 || 0)} />
       <VisAxis
         type='y'
         position={'right'}