Website | Gallery: Basic Donut Chart

packages/shared/examples/basic-donut-chart/basic-donut-chart.component.html

@@ -0,0 +1,12 @@
+
+<h3>Most Common Password Categories</h3>
+<vis-bullet-legend [items]="legendItems"></vis-bullet-legend>
+<vis-single-container [height]="400">
+  <vis-donut
+    [value]="value"
+    [data]="data"
+    [showEmptySegments]="true"
+    [padAngle]="0.01"
+    [arcWidth]="100"
+  />
+</vis-single-container>

packages/shared/examples/basic-donut-chart/basic-donut-chart.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core'
+import { data, DataRecord } from './data'
+
+@Component({
+  selector: 'basic-donut-chart-component',
+  templateUrl: './basic-donut-chart.component.html',
+})
+
+export class BasicDonutChartComponent {
+  value = (d: DataRecord): number => d.value
+  data = data
+  legendItems = Object.entries(data).map(([_, data]) => ({
+    name: data.key.charAt(0).toUpperCase() + data.key.slice(1),
+  }))
+}
+

packages/shared/examples/basic-donut-chart/basic-donut-chart.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core'
+import { VisSingleContainerModule, VisDonutModule, VisBulletLegendModule } from '@unovis/angular'
+
+import { BasicDonutChartComponent } from './basic-donut-chart.component'
+
+@NgModule({
+  imports: [VisSingleContainerModule, VisDonutModule, VisBulletLegendModule],
+  declarations: [BasicDonutChartComponent],
+  exports: [BasicDonutChartComponent],
+})
+export class BasicDonutChartModule { }

packages/shared/examples/basic-donut-chart/basic-donut-chart.svelte

@@ -0,0 +1,21 @@
+<script lang='ts'>
+  import { VisSingleContainer, VisDonut, VisBulletLegend } from '@unovis/svelte'
+  import { data, DataRecord } from './data'
+
+  const legendItems = Object.entries(data).map(([_, data]) => ({
+    name: data.key.charAt(0).toUpperCase() + data.key.slice(1),
+  }))
+</script>
+
+<h3>Most Common Password Categories</h3>
+<VisBulletLegend items={legendItems}/>
+<VisSingleContainer height={400}>
+  <VisDonut
+    value={d => d.value}
+    {data}
+    showEmptySegments={true}
+    padAngle={0.01}
+    arcWidth={100}
+  />
+</VisSingleContainer>
+

packages/shared/examples/basic-donut-chart/basic-donut-chart.ts

@@ -0,0 +1,21 @@
+import { Donut, SingleContainer, BulletLegend } from '@unovis/ts'
+import { data, DataRecord } from './data'
+
+const container = document.getElementById('vis-container')
+container.innerHTML = '<h3>Most Common Password Categories</h3>'
+
+const legendItems = Object.entries(data).map(([_, data]) => ({
+  name: data.key.charAt(0).toUpperCase() + data.key.slice(1),
+}))
+const legend = new BulletLegend(container, { items: legendItems })
+
+const chart = new SingleContainer(container, {
+  component: new Donut<DataRecord>({
+    value: (d: DataRecord) => d.value,
+    showEmptySegments: true,
+    padAngle: 0.01,
+    arcWidth: 100,
+  }),
+  height: 400,
+}, data)
+

packages/shared/examples/basic-donut-chart/basic-donut-chart.tsx

@@ -0,0 +1,26 @@
+import React, { useCallback } from 'react'
+import { VisSingleContainer, VisDonut, VisBulletLegend } from '@unovis/react'
+
+import { data } from './data'
+
+const legendItems = Object.entries(data).map(([_, data]) => ({
+  name: data.key.charAt(0).toUpperCase() + data.key.slice(1),
+}))
+
+export default function BasicDonutChart (): JSX.Element {
+  return (
+    <>
+      <h3>Most Common Password Categories</h3>
+      <VisBulletLegend items={legendItems}/>
+      <VisSingleContainer height={400}>
+        <VisDonut
+          value={useCallback(d => d.value, [])}
+          data={data}
+          showEmptySegments={true}
+          padAngle={0.01}
+          arcWidth={100}
+        />
+      </VisSingleContainer>
+    </>
+  )
+}

packages/shared/examples/basic-donut-chart/basic-donut-chart.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { VisSingleContainer, VisDonut, VisBulletLegend } from '@unovis/vue'
+import { data, DataRecord } from './data'
+
+const legendItems = Object.entries(data).map(([_, data]) => ({
+  name: data.key.charAt(0).toUpperCase() + data.key.slice(1)
+}))
+</script>
+
+<template>
+  <h3>Most Common Password Categories</h3>
+  <VisBulletLegend :items="legendItems"/>
+  <VisSingleContainer :height="400">
+  <VisDonut
+    :value="d => d.value"
+    :data="data"
+    :showEmptySegments="true"
+    :padAngle="0.01"
+    :arcWidth="100"
+  />
+</VisSingleContainer>
+</template>
+

packages/shared/examples/basic-donut-chart/data.ts

@@ -0,0 +1,10 @@
+export type DataRecord = { key: string; value: number }
+
+export const data: DataRecord[] = [
+  { key: 'names', value: 1396 },
+  { key: 'cool', value: 928 },
+  { key: 'alphanumeric', value: 864 },
+  { key: 'fluffy', value: 518 },
+  { key: 'nerdy', value: 294 },
+  { key: 'other', value: 916 },
+]

packages/shared/examples/basic-donut-chart/index.tsx

@@ -0,0 +1,29 @@
+/* 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 = 'basic-donut-chart'
+const example: Example = {
+  component: () => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const Component = require(`./${pathname}.tsx`).default
+    return <Component />
+  },
+  pathname,
+  title: 'Basic Donut Chart',
+  description: <div>Data obtained from <a href="https://informationisbeautiful.net/visualizations/top-500-passwords-visualized/" target="_blank">information is beautiful</a></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/examples-list.tsx

@@ -31,6 +31,13 @@ export const examples: ExampleCollection[] = [
       require('./horizontal-stacked-bar-chart').default,
     ],
   },
+  {
+    title: 'Donut Charts',
+    description: '',
+    examples: [
+      require('./basic-donut-chart').default,
+    ],
+  },
   {
     title: 'Scatter Plots',
     description: '',

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

@@ -26,6 +26,7 @@
     () => import('@unovis/shared/examples/elk-layered-graph/elk-layered-graph.svelte'),
     () => import('@unovis/shared/examples/hierarchical-chord-diagram/hierarchical-chord-diagram.svelte'),
     () => import('@unovis/shared/examples/sunburst-nested-donut/sunburst-nested-donut.svelte'),
+    () => import('@unovis/shared/examples/basic-donut-chart/basic-donut-chart.svelte'),
   ]
 </script>
 

packages/vue/src-demo/App.vue

@@ -11,7 +11,7 @@ const imports = [
   defineAsyncComponent(() => import('@unovis/shared/examples/leaflet-flow-map/leaflet-flow-map.vue')),
   defineAsyncComponent(() => import('@unovis/shared/examples/advanced-leaflet-map/advanced-leaflet-map.vue')),
   defineAsyncComponent(() => import('@unovis/shared/examples/basic-line-chart/basic-line-chart.vue')),
-  defineAsyncComponent(() => import('@unovis/shared/examples/basic-scatter-chart/basic-scatter-chart.vue')),
+  defineAsyncComponent(() => import('@unovis/shared/examples/basic-scatter-plot/basic-scatter-plot.vue')),
   defineAsyncComponent(() => import('@unovis/shared/examples/brush-grouped-bar/brush-grouped-bar.vue')),
   defineAsyncComponent(() => import('@unovis/shared/examples/free-brush-scatters/free-brush-scatters.vue')),
   defineAsyncComponent(() => import('@unovis/shared/examples/horizontal-stacked-bar-chart/horizontal-stacked-bar-chart.vue')),
@@ -28,6 +28,7 @@ const imports = [
   defineAsyncComponent(() => import('@unovis/shared/examples/elk-layered-graph/elk-layered-graph.vue')),
   defineAsyncComponent(() => import('@unovis/shared/examples/hierarchical-chord-diagram/hierarchical-chord-diagram.vue')),
   defineAsyncComponent(() => import('@unovis/shared/examples/sunburst-nested-donut/sunburst-nested-donut.vue')),
+  defineAsyncComponent(() => import('@unovis/shared/examples/basic-donut-chart/basic-donut-chart.vue')),
 ]
 </script>