Website | Gallery: Update Basic Grouped Bar Chart Legend

packages/shared/examples/basic-grouped-bar/basic-grouped-bar.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core'
-import { data, colors, ElectionDatum } from './data'
+import { data, colors, capitalize, ElectionDatum } from './data'
 
 @Component({
   selector: 'basic-grouped-bar',
@@ -17,7 +17,7 @@ export class BasicGroupedBarComponent {
   data = data
 
   legendItems = Object.entries(colors).map(([n, c]) => ({
-    name: n.toUpperCase(),
+    name: capitalize(n),
     color: c,
   }))
 

packages/shared/examples/basic-grouped-bar/basic-grouped-bar.svelte

@@ -1,9 +1,9 @@
 <script lang='ts'>
   import { VisXYContainer, VisGroupedBar, VisAxis, VisBulletLegend } from '@unovis/svelte'
-  import { data, colors, ElectionDatum } from './data'
+  import { data, colors, capitalize, ElectionDatum } from './data'
 
   const items = Object.entries(colors).map(([n, c]) => ({
-    name: n.toUpperCase(),
+    name: capitalize(n),
     color: c,
   }))
   const x = (d: ElectionDatum) => d.year

packages/shared/examples/basic-grouped-bar/basic-grouped-bar.ts

@@ -1,10 +1,10 @@
 import { XYContainer, Axis, GroupedBar, BulletLegend } from '@unovis/ts'
-import { data, colors, ElectionDatum } from './data'
+import { data, colors, capitalize, ElectionDatum } from './data'
 
 const container = document.getElementById('vis-container')
 
 const legendItems = Object.entries(colors).map(([n, c]) => ({
-  name: n.toUpperCase(),
+  name: capitalize(n),
   color: c,
 }))
 const legend = new BulletLegend(container, { items: legendItems })

packages/shared/examples/basic-grouped-bar/basic-grouped-bar.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react'
 import { VisXYContainer, VisGroupedBar, VisAxis, VisBulletLegend } from '@unovis/react'
 
-import { data, colors } from './data'
+import { data, capitalize, colors } from './data'
 
 const legendItems = Object.entries(colors).map(([n, c]) => ({
-  name: n.toUpperCase(),
+  name: capitalize(n),
   color: c,
 }))
 

packages/shared/examples/basic-grouped-bar/basic-grouped-bar.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { VisXYContainer, VisGroupedBar, VisAxis, VisBulletLegend } from '@unovis/vue'
-import { data, colors, ElectionDatum } from './data'
+import { data, capitalize, colors, ElectionDatum } from './data'
 
 const items = Object.entries(colors).map(([n, c]) => ({
-  name: n.toUpperCase(),
+  name: capitalize(n),
   color: c,
 }))
 const x = (d: ElectionDatum) => d.year

packages/shared/examples/basic-grouped-bar/data.ts

@@ -13,6 +13,10 @@ export const colors = {
   libertarian: '#34daa6',
 }
 
+export const capitalize = (s: string): string => {
+  return s.charAt(0).toUpperCase() + s.slice(1)
+}
+
 export const data: ElectionDatum[] = [
   {
     year: 1980,