Website | Add new composite chart section and dual axis chart

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

@@ -0,0 +1,15 @@
+export type XYDataRecord = {
+  x: number;
+  y: number | undefined;
+  y1?: number;
+  y2?: number;
+}
+
+export function generateXYDataRecords (n = 10): XYDataRecord[] {
+  return Array(n).fill(0).map((_, i) => ({
+    x: i,
+    y: 5 + 5 * Math.random(),
+    y1: 1 + 3 * Math.random(),
+    y2: 2 * Math.random(),
+  }))
+}

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

@@ -0,0 +1,35 @@
+<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

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core'
+import { XYDataRecord, generateXYDataRecords } from './data'
+
+@Component({
+  selector: 'dual-axis-chart',
+  templateUrl: './dual-axis-chart.component.html',
+})
+export class DualAxisChartComponent {
+  data = generateXYDataRecords(150)
+
+  margin = { left: 100, right: 100, top: 40, bottom: 60 }
+  style = { position: 'absolute', top: 0, left: 0, width: '100%', height: '40vh' }
+
+  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

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

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

@@ -0,0 +1,65 @@
+<script lang='ts'>
+
+  import { VisXYContainer, VisArea, VisAxis, VisLine } from '@unovis/svelte'
+  import { XYDataRecord, generateXYDataRecords } from './data'
+
+  const margin = { left: 100, right: 100, top: 40, bottom: 60 }
+  const style: React.CSSProperties = { position: 'absolute', top: 0, left: 0, width: '100%', height: '40vh' }
+  const chartX = d => d.x
+  const chartAY = (d: XYDataRecord, i: number) => i * (d.y || 0)
+  const chartBY = (d: XYDataRecord) => 20 + 10 * (d.y2 || 0)
+  const xTicks = (x: number) => `${x}ms`
+  const chartAYTicks = (y: number) => `${y}bps`
+  const chartBYTicks = (y: number) => `${y}db`
+
+</script>
+
+<div>
+  <VisXYContainer
+    data={generateXYDataRecords(150)}
+    autoMargin={false}
+    margin={margin}
+    width= {'100%'}
+    height= {'40vh'}
+  >
+    <VisArea x={chartX} y={chartAY} opacity={0.9} color={'#FF6B7E'} />
+    <VisAxis type='x' numTicks={3} tickFormat={xTicks} label='Time'/>
+    <VisAxis type='y'
+      tickFormat={chartAYTicks}
+      tickTextWidth={60}
+      tickTextColor={'#FF6B7E'}
+      labelColor={'#FF6B7E'}
+      label='Traffic'
+    />
+  </VisXYContainer>
+  <VisXYContainer
+    data={generateXYDataRecords(150)}
+    yDomain={[0, 150]}
+    margin={margin}
+    autoMargin={false}
+    width= {'100%'}
+    height= {'40vh'}
+    class={'chartContainer'}
+  >
+    <VisLine x={chartX} y={chartBY} />
+    <VisAxis
+      type='y'
+      position={'right'}
+      tickFormat={chartBYTicks}
+      gridLine={false}
+      tickTextColor={'#4D8CFD'}
+      labelColor={'#4D8CFD'}
+      label='Signal Strength'
+    />
+  </VisXYContainer>
+</div>
+
+<style>
+  div :global(.chartContainer) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 40vh;
+  }
+</style>

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

@@ -0,0 +1,59 @@
+import { XYContainer, Area, Line, Axis } from '@unovis/ts'
+import { XYDataRecord, generateXYDataRecords } from './data'
+import './styles.css'
+
+const container = document.getElementById('vis-container')
+const chartAContainer = document.createElement('div')
+container.appendChild(chartAContainer)
+
+const chartBContainer = document.createElement('div')
+chartBContainer.className = 'chartContainer'
+container.appendChild(chartBContainer)
+
+const margin = { left: 100, right: 100, top: 40, bottom: 60 }
+
+// Area
+const area = new Area<XYDataRecord>({
+  x: (d: XYDataRecord) => d.x,
+  y: (d: XYDataRecord, i: number) => i * (d.y || 0),
+  opacity: 0.9,
+  color: '#FF6B7E',
+})
+
+const line = new Line<XYDataRecord>({
+  x: (d: XYDataRecord) => d.x,
+  y: (d: XYDataRecord, i: number) => 20 + 10 * (d.y2 || 0),
+})
+
+// Container
+const chartA = new XYContainer(chartAContainer, {
+  height: '40vh',
+  width: '100%',
+  position: 'absolute',
+  components: [area],
+  margin: margin,
+  autoMargin: false,
+  xAxis: new Axis({ label: 'Time' }),
+  yAxis: new Axis({
+    label: 'Traffic',
+    tickFormat: (y: number) => `${y}bps`,
+    tickTextWidth: 60,
+    tickTextColor: '#FF6B7E',
+    labelColor: '#FF6B7E',
+  }),
+}, generateXYDataRecords(150))
+
+const chartB = new XYContainer(chartBContainer, {
+  components: [line],
+  yDomain: [0, 150],
+  margin: margin,
+  autoMargin: false,
+  yAxis: new Axis({
+    position: 'right',
+    tickFormat: (y: number) => `${y}db`,
+    gridLine: false,
+    tickTextColor: '#4D8CFD',
+    labelColor: '#4D8CFD',
+    label: 'Signal Strength',
+  }),
+}, generateXYDataRecords(150))

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

@@ -0,0 +1,47 @@
+import React from 'react'
+import { VisXYContainer, VisArea, VisLine, VisAxis } from '@unovis/react'
+
+import { XYDataRecord, generateXYDataRecords } from './data'
+
+export default function component (): JSX.Element {
+  const margin = { left: 100, right: 100, top: 40, bottom: 60 }
+  const style: React.CSSProperties = { position: 'absolute', top: 0, left: 0, width: '100%', height: '40vh' }
+  return (<>
+    <VisXYContainer
+      data={generateXYDataRecords(150)}
+      margin={margin}
+      autoMargin={false}
+      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' />
+      <VisAxis type='y'
+        tickFormat={(y: number) => `${y}bps`}
+        tickTextWidth={60}
+        tickTextColor='#FF6B7E'
+        labelColor='#FF6B7E'
+        label='Traffic'
+      />
+    </VisXYContainer>
+    <VisXYContainer
+      data={generateXYDataRecords(150)}
+      yDomain={[0, 150]}
+      margin={margin}
+      autoMargin={false}
+      style={style}
+    >
+      <VisLine<XYDataRecord> x={d => d.x} y={d => 20 + 10 * (d.y2 || 0)} />
+      <VisAxis
+        type='y'
+        position={'right'}
+        tickFormat={(y: number) => `${y}db`}
+        gridLine={false}
+        tickTextColor='#4D8CFD'
+        labelColor='#4D8CFD'
+        label='Signal Strength'
+      />
+    </VisXYContainer>
+  </>
+  )
+}

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { VisXYContainer, VisArea, VisAxis, VisLine } from '@unovis/vue'
+import { XYDataRecord, generateXYDataRecords } from './data'
+const margin = { left: 100, right: 100, top: 40, bottom: 60 }
+const style: React.CSSProperties = { position: 'absolute', top: 0, left: 0, width: '100%', height: '40vh' }
+
+const chartX = d => d.x
+const chartAY = (d: XYDataRecord, i: number) => i * (d.y || 0)
+const chartBY = (d: XYDataRecord) => 20 + 10 * (d.y2 || 0)
+const xTicks = (x: number) => `${x}ms`
+const chartAYTicks = (y: number) => `${y}bps`
+const chartBYTicks = (y: number) => `${y}db`
+</script>
+
+<template>
+  <VisXYContainer
+      :data=generateXYDataRecords(150)
+      :margin= margin
+      :autoMargin= false
+      :width="'100%'"
+      :height= "'40vh'"
+    >
+      <VisArea :x=chartX :y=chartAY :opacity=0.9 :color="'#FF6B7E'" />
+      <VisAxis type='x' :numTicks=3 :tickFormat="xTicks" :label="'Time'"/>
+      <VisAxis type='y'
+        :tickFormat="chartAYTicks"
+        :tickTextWidth=60
+        :tickTextColor="'#FF6B7E'"
+        :labelColor="'#FF6B7E'"
+        :label="'Traffic'"
+      />
+    </VisXYContainer>
+    <VisXYContainer
+      :data=generateXYDataRecords(150)
+      :yDomain="[0, 150]"
+      :margin=margin
+      :autoMargin=false
+      :style=style
+    >
+      <VisLine :x=chartX :y=chartBY />
+      <VisAxis
+        type='y'
+        :position="'right'"
+        :tickFormat="chartBYTicks"
+        :gridLine=false
+        :tickTextColor="'#4D8CFD'"
+        :labelColor="'#4D8CFD'"
+        :label="'Signal Strength'"
+      />
+    </VisXYContainer>
+</template>

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

@@ -0,0 +1,32 @@
+/* eslint-disable import/no-unresolved, import/no-webpack-loader-syntax, @typescript-eslint/no-var-requires */
+import React from 'react'
+import type { Example } from '../types'
+
+const pathname = 'dual-axis-chart'
+const example: Example = {
+  component: () => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const Component = require(`./${pathname}.tsx`).default
+    return <Component />
+  },
+  pathname,
+  title: 'Dual Axis Chart',
+  description: <div>
+    Randomly Generated Data
+    <div style={{ fontSize: '15px' }}>*This example shows how to create dual axis chart by overlapping two charts</div>
+  </div>,
+  codeReact: require(`!!raw-loader!./${pathname}.tsx`).default,
+  codeTs: require(`!!raw-loader!./${pathname}.ts`).default,
+  codeAngular: {
+    html: require(`!!raw-loader!./${pathname}.component.html`).default,
+    component: require(`!!raw-loader!./${pathname}.component.ts`).default,
+    module: require(`!!raw-loader!./${pathname}.module.ts`).default,
+  },
+  codeSvelte: require(`!!raw-loader!./${pathname}.svelte`).default,
+  codeVue: require(`!!raw-loader!./${pathname}.vue`).default,
+  data: require('!!raw-loader!./data').default,
+  preview: require(`../_previews/${pathname}.png`).default,
+  previewDark: require(`../_previews/${pathname}-dark.png`).default,
+}
+
+export default example

packages/shared/examples/dual-axis-chart/styles.css

@@ -0,0 +1,7 @@
+.chartContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 40vh;
+}

packages/shared/examples/examples-list.tsx

@@ -75,6 +75,13 @@ export const examples: ExampleCollection[] = [
       require('./sunburst-nested-donut').default,
     ],
   },
+  {
+    title: 'Composite Charts',
+    description: '',
+    examples: [
+      require('./dual-axis-chart').default,
+    ],
+  },
   {
     title: 'Auxiliary Components',
     description: 'Annotations, Brushes, Tooltips and more',

packages/svelte/src-demo/svelte-gallery.svelte

@@ -1,5 +1,6 @@
 <script>
   const imports = [
+    () => import('@unovis/shared/examples/dual-axis-chart/dual-axis-chart.svelte'),
     () => import('@unovis/shared/examples/step-area-chart/step-area-chart.svelte'),
     () => import('@unovis/shared/examples/baseline-area-chart/baseline-area-chart.svelte'),
     () => import('@unovis/shared/examples/non-stacked-area-chart/non-stacked-area-chart.svelte'),

packages/vue/src-demo/App.vue

@@ -2,6 +2,7 @@
 import { defineAsyncComponent } from "vue"
 
 const imports = [
+  defineAsyncComponent(() => import('@unovis/shared/examples/dual-axis-chart/dual-axis-chart.vue')), 
   defineAsyncComponent(() => import('@unovis/shared/examples/step-area-chart/step-area-chart.vue')),
   defineAsyncComponent(() => import('@unovis/shared/examples/baseline-area-chart/baseline-area-chart.vue')),
   defineAsyncComponent(() => import('@unovis/shared/examples/non-stacked-area-chart/non-stacked-area-chart.vue')),