AG-15641 - Spruce up gallery examples.

Author: alantreadway

packages/ag-charts-website/src/content/docs/key-features/_examples/map-kitchen-sink/main.ts

@@ -75,7 +75,7 @@ const options: AgChartOptions = {
                 .map((t: any) => {
                     return { name: t.properties.city };
                 })
-                .filter(({ name }: any) => name != null),
+                .filter(({ name }: { name: string }) => name != null),
             idKey: 'name',
             title: 'Capital City',
             topologyIdKey: 'city',

packages/ag-charts-website/src/content/gallery/_examples/100--stacked-area/data.ts

@@ -1,5 +1,17 @@
 // Source: https://www.gov.uk/government/statistics/total-energy-section-1-energy-trends
-export function getData(): any[] {
+
+export interface EnergyData {
+    date: Date;
+    coal: number;
+    petroleum: number;
+    naturalGas: number;
+    bioenergyWaste: number;
+    nuclear: number;
+    windSolarHydro: number;
+    imported: number;
+}
+
+export function getData(): EnergyData[] {
     return [
         {
             date: new Date(2020, 0, 1),

packages/ag-charts-website/src/content/gallery/_examples/100--stacked-area/main.ts

@@ -1,20 +1,36 @@
-import { AgChartOptions, AgCharts } from 'ag-charts-enterprise';
+import { AgCartesianChartOptions, AgCharts } from 'ag-charts-enterprise';
 
-import { getData } from './data';
+import { EnergyData, getData } from './data';
 
 const interpolation = { type: 'smooth' } as const;
 
-const options: AgChartOptions = {
+const options: AgCartesianChartOptions = {
     container: document.getElementById('myChart'),
     data: getData(),
     title: {
         text: 'UK Energy Sources',
-        fontSize: 20,
+        spacing: 25,
     },
     footnote: {
         text: 'Source: Department for Business, Energy & Industrial Strategy',
-        fontSize: 12,
         fontStyle: 'italic',
+        spacing: 10,
+    },
+    theme: {
+        overrides: {
+            area: {
+                series: {
+                    strokeWidth: 1.5,
+                    fillOpacity: 0.88,
+                    highlight: {
+                        highlightedItem: {
+                            fillOpacity: 0.95,
+                            strokeWidth: 2,
+                        },
+                    },
+                },
+            },
+        },
     },
     series: [
         {
@@ -46,9 +62,6 @@ const options: AgChartOptions = {
             normalizedTo: 1,
             stacked: true,
             interpolation,
-            fill: {
-                type: 'pattern',
-            },
         },
         {
             type: 'area',
@@ -88,15 +101,20 @@ const options: AgChartOptions = {
             normalizedTo: 1,
             stacked: true,
             interpolation,
-            fill: {
-                type: 'pattern',
-            },
         },
     ],
     axes: [
         {
             type: 'unit-time',
             position: 'bottom',
+            crosshair: {
+                enabled: true,
+                strokeWidth: 1,
+                lineDash: [3, 3],
+                label: {
+                    enabled: true,
+                },
+            },
         },
         {
             type: 'number',
@@ -109,12 +127,36 @@ const options: AgChartOptions = {
             },
             title: {
                 text: 'Percentage of Total Energy',
-                fontSize: 14,
             },
         },
     ],
     legend: {
-        position: 'top',
+        position: 'bottom',
+        spacing: 25,
+        item: {
+            paddingX: 10,
+            paddingY: 8,
+        },
+    },
+    tooltip: {
+        mode: 'shared',
+        position: {
+            placement: ['right', 'left', 'top', 'bottom'],
+        },
+        range: 'nearest',
+        showArrow: false,
+    },
+    animation: {
+        enabled: true,
+        duration: 800,
+    },
+    seriesArea: {
+        padding: {
+            top: 20,
+            right: 25,
+            bottom: 15,
+            left: 15,
+        },
     },
     formatter: (params) => {
         const { value, type } = params;

packages/ag-charts-website/src/content/gallery/_examples/100--stacked-column/main.ts

@@ -11,6 +11,9 @@ const options: AgChartOptions = {
     footnote: {
         text: 'Source: Department for Education',
     },
+    tooltip: {
+        mode: 'shared',
+    },
     series: [
         {
             type: 'bar',
@@ -65,6 +68,9 @@ const options: AgChartOptions = {
         {
             type: 'category',
             position: 'bottom',
+            bandHighlight: {
+                enabled: true,
+            },
         },
         {
             type: 'number',
@@ -74,6 +80,9 @@ const options: AgChartOptions = {
             },
         },
     ],
+    legend: {
+        position: 'bottom',
+    },
 };
 
 AgCharts.create(options);

packages/ag-charts-website/src/content/gallery/_examples/area-with-labels/main.ts

@@ -26,14 +26,6 @@ const options: AgChartOptions<DataType> = {
             yKey: 'sales',
             yName: 'Sales',
             strokeWidth: 1,
-            fill: {
-                type: 'gradient',
-                colorStops: [
-                    { color: '#ffffff', stop: 0 },
-                    { color: '#7da9e8', stop: 0.75 },
-                    { color: '#2c6ed5', stop: 1 },
-                ],
-            },
             label: {
                 enabled: true,
             },
@@ -43,10 +35,16 @@ const options: AgChartOptions<DataType> = {
         {
             type: 'unit-time',
             position: 'bottom',
+            gridLine: {
+                style: [{ strokeWidth: 1, lineDash: [2, 2] }, { strokeWidth: 0 }],
+            },
         },
         {
             type: 'number',
             position: 'left',
+            gridLine: {
+                style: [{ strokeWidth: 1, lineDash: [2, 2] }, { strokeWidth: 0 }],
+            },
         },
     ],
     formatter: {

packages/ag-charts-website/src/content/gallery/_examples/area-with-markers/main.ts

@@ -11,6 +11,10 @@ const options: AgChartOptions = {
     subtitle: {
         text: 'Q4 Net New Subscription Revenue In Millions',
     },
+    tooltip: {
+        enabled: true,
+        mode: 'shared',
+    },
     theme: {
         overrides: {
             area: {
@@ -50,6 +54,9 @@ const options: AgChartOptions = {
             label: {
                 rotation: -90,
             },
+            bandHighlight: {
+                enabled: true,
+            },
             crossLines: [
                 {
                     type: 'range',

packages/ag-charts-website/src/content/gallery/_examples/area-with-negative-values/data.ts

@@ -1,9 +1,102 @@
-// Source: https://www.gov.uk/government/statistics/total-energy-section-1-energy-trends
+// SaaS startup journey: From launch losses through growth to profitability
 export function getData(): any[] {
     return [
-        { quarter: 'Q1', coal: -666, manufacturedFuels: -14, primaryOil: -261, petroleum: -124, naturalGas: -1197 },
-        { quarter: 'Q2', coal: 208, manufacturedFuels: 71, primaryOil: 950, petroleum: -318, naturalGas: 906 },
-        { quarter: 'Q3', coal: 426, manufacturedFuels: 19, primaryOil: -845, petroleum: 166, naturalGas: 276 },
-        { quarter: 'Q4', coal: 158, manufacturedFuels: -29, primaryOil: -156, petroleum: -19, naturalGas: 672 },
+        // Early startup phase - high costs, low revenue
+        {
+            quarter: ['2022', 'Q1'],
+            productRevenue: 850,
+            serviceRevenue: 200,
+            operatingCosts: -4200,
+            rdInvestment: -2800,
+        },
+        {
+            quarter: ['2022', 'Q2'],
+            productRevenue: 1400,
+            serviceRevenue: 350,
+            operatingCosts: -4800,
+            rdInvestment: -3200,
+        },
+
+        // Product-market fit discovery - rapid growth begins
+        {
+            quarter: ['2022', 'Q3'],
+            productRevenue: 2800,
+            serviceRevenue: 650,
+            operatingCosts: -5200,
+            rdInvestment: -3500,
+        },
+        {
+            quarter: ['2022', 'Q4'],
+            productRevenue: 4200,
+            serviceRevenue: 950,
+            operatingCosts: -5800,
+            rdInvestment: -3800,
+        },
+
+        // Scale-up phase - explosive growth, heavy investment
+        {
+            quarter: ['2023', 'Q1'],
+            productRevenue: 6500,
+            serviceRevenue: 1400,
+            operatingCosts: -7200,
+            rdInvestment: -4200,
+        },
+        {
+            quarter: ['2023', 'Q2'],
+            productRevenue: 9200,
+            serviceRevenue: 2100,
+            operatingCosts: -8500,
+            rdInvestment: -4800,
+        },
+
+        // Market downturn - costs cut, growth slows
+        {
+            quarter: ['2023', 'Q3'],
+            productRevenue: 8800,
+            serviceRevenue: 2300,
+            operatingCosts: -6900,
+            rdInvestment: -3200,
+        },
+        {
+            quarter: ['2023', 'Q4'],
+            productRevenue: 9500,
+            serviceRevenue: 2800,
+            operatingCosts: -6200,
+            rdInvestment: -2800,
+        },
+
+        // Recovery and optimization - approaching profitability
+        {
+            quarter: ['2024', 'Q1'],
+            productRevenue: 11200,
+            serviceRevenue: 3200,
+            operatingCosts: -8200,
+            rdInvestment: -3500,
+        },
+        {
+            quarter: ['2024', 'Q2'],
+            productRevenue: 13500,
+            serviceRevenue: 3800,
+            operatingCosts: -9100,
+            rdInvestment: -4200,
+        },
+
+        // Breakthrough quarter - first profitable quarter
+        {
+            quarter: ['2024', 'Q3'],
+            productRevenue: 16200,
+            serviceRevenue: 4500,
+            operatingCosts: -11200,
+            rdInvestment: -4800,
+        },
+
+        // Sustained profitability - strong finish
+        {
+            quarter: ['2024', 'Q4'],
+            productRevenue: 19500,
+            serviceRevenue: 5200,
+            operatingCosts: -13800,
+            rdInvestment: -5500,
+        },
     ];
 }