@htlkg/components 0.0.1

package/src/data/Chart.demo.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="space-y-8">
+    <div>
+      <h2 class="text-2xl font-bold mb-4">Chart Component Demo</h2>
+      <p class="text-gray-600 mb-6">
+        Data visualization with multiple chart types powered by ApexCharts.
+      </p>
+    </div>
+
+    <!-- Line Chart -->
+    <div class="border rounded-lg p-6">
+      <h3 class="text-lg font-semibold mb-4">Line Chart</h3>
+      <Chart
+        id="line-chart"
+        title="Monthly Sales"
+        type="line"
+        :series="lineChartData"
+        :options="lineChartOptions"
+        :loading="lineLoading"
+        @data-point-selection="handlePointClick"
+      />
+      <button
+        @click="refreshLineChart"
+        class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+      >
+        Refresh Data
+      </button>
+    </div>
+
+    <!-- Area Chart -->
+    <div class="border rounded-lg p-6">
+      <h3 class="text-lg font-semibold mb-4">Area Chart with Multiple Series</h3>
+      <Chart
+        id="area-chart"
+        title="Website Traffic"
+        type="area"
+        :series="areaChartData"
+        :options="areaChartOptions"
+        :loading="areaLoading"
+      />
+    </div>
+
+    <!-- Bar Chart -->
+    <div class="border rounded-lg p-6">
+      <h3 class="text-lg font-semibold mb-4">Bar Chart</h3>
+      <Chart
+        id="bar-chart"
+        title="Quarterly Revenue"
+        type="bar"
+        :series="barChartData"
+        :options="barChartOptions"
+        :loading="barLoading"
+      />
+    </div>
+
+    <!-- Horizontal Bar Chart -->
+    <div class="border rounded-lg p-6">
+      <h3 class="text-lg font-semibold mb-4">Horizontal Bar Chart</h3>
+      <Chart
+        id="horizontal-chart"
+        title="Top Locations"
+        type="bar"
+        :series="horizontalChartData"
+        :options="horizontalChartOptions"
+        :loading="false"
+        horizontal
+      />
+    </div>
+
+    <!-- Stacked Bar Chart -->
+    <div class="border rounded-lg p-6">
+      <h3 class="text-lg font-semibold mb-4">Stacked Bar Chart</h3>
+      <Chart
+        id="stacked-chart"
+        title="Revenue by Product"
+        type="bar"
+        :series="stackedChartData"
+        :options="stackedChartOptions"
+        :loading="false"
+        stacked
+      />
+    </div>
+
+    <!-- Chart with Time Range -->
+    <div class="border rounded-lg p-6">
+      <h3 class="text-lg font-semibold mb-4">Chart with Time Range Selector</h3>
+      <Chart
+        id="range-chart"
+        title="Analytics Overview"
+        type="area"
+        :series="rangeChartData"
+        :options="rangeChartOptions"
+        :loading="rangeLoading"
+        :range="selectedRange"
+        @range-selected="handleRangeChange"
+      />
+      <div class="mt-4 flex gap-2">
+        <button
+          v-for="range in timeRanges"
+          :key="range"
+          @click="selectedRange = range"
+          :class="[
+            'px-4 py-2 rounded',
+            selectedRange === range
+              ? 'bg-blue-500 text-white'
+              : 'bg-gray-200 hover:bg-gray-300'
+          ]"
+        >
+          {{ range.toUpperCase() }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <div class="border rounded-lg p-6">
+      <h3 class="text-lg font-semibold mb-4">Empty State</h3>
+      <Chart
+        id="empty-chart"
+        title="No Data Available"
+        type="line"
+        :series="[]"
+        :loading="false"
+        :empty="true"
+      />
+    </div>
+
+    <!-- Loading State -->
+    <div class="border rounded-lg p-6">
+      <h3 class="text-lg font-semibold mb-4">Loading State</h3>
+      <Chart
+        id="loading-chart"
+        title="Loading Data..."
+        type="area"
+        :series="loadingChartData"
+        :loading="isLoadingChart"
+      />
+      <button
+        @click="toggleLoadingChart"
+        class="mt-4 px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600"
+      >
+        {{ isLoadingChart ? 'Stop Loading' : 'Start Loading' }}
+      </button>
+    </div>
+
+    <!-- Chart with Annotations -->
+    <div class="border rounded-lg p-6">
+      <h3 class="text-lg font-semibold mb-4">Chart with Annotations</h3>
+      <Chart
+        id="annotation-chart"
+        title="Performance Metrics"
+        type="line"
+        :series="annotationChartData"
+        :options="annotationChartOptions"
+        :annotations="annotation"
+        :loading="false"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Chart } from '@htlkg/components';
+import type { ChartSeries, ChartOptions, ChartAnnotation, ChartDateRange } from '@htlkg/components';
+
+// Line Chart
+const lineLoading = ref(false);
+const lineChartData = ref<ChartSeries[]>([
+  {
+    name: 'Revenue',
+    data: [30, 40, 45, 50, 49, 60, 70, 91, 125, 140, 165, 180]
+  }
+]);
+
+const lineChartOptions: ChartOptions = {
+  xaxis: {
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+  },
+  tooltip: {
+    intersect: false
+  }
+};
+
+function refreshLineChart() {
+  lineLoading.value = true;
+  setTimeout(() => {
+    lineChartData.value = [
+      {
+        name: 'Revenue',
+        data: Array.from({ length: 12 }, () => Math.floor(Math.random() * 200))
+      }
+    ];
+    lineLoading.value = false;
+  }, 1000);
+}
+
+function handlePointClick(data: any) {
+  console.log('Clicked data point:', data);
+  alert(`Clicked on data point: ${JSON.stringify(data)}`);
+}
+
+// Area Chart
+const areaLoading = ref(false);
+const areaChartData: ChartSeries[] = [
+  {
+    name: 'Visitors',
+    data: [30, 40, 45, 50, 49, 60, 70, 91, 125]
+  },
+  {
+    name: 'Page Views',
+    data: [50, 60, 70, 80, 75, 90, 100, 130, 180]
+  }
+];
+
+const areaChartOptions: ChartOptions = {
+  xaxis: {
+    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue']
+  }
+};
+
+// Bar Chart
+const barLoading = ref(false);
+const barChartData: ChartSeries[] = [
+  {
+    name: 'Q1',
+    data: [44, 55, 41, 67]
+  },
+  {
+    name: 'Q2',
+    data: [13, 23, 20, 8]
+  }
+];
+
+const barChartOptions: ChartOptions = {
+  xaxis: {
+    categories: ['Product A', 'Product B', 'Product C', 'Product D']
+  }
+};
+
+// Horizontal Bar Chart
+const horizontalChartData: ChartSeries[] = [
+  {
+    name: 'Sessions',
+    data: [400, 300, 250, 200, 150]
+  }
+];
+
+const horizontalChartOptions: ChartOptions = {
+  xaxis: {
+    categories: ['New York', 'London', 'Tokyo', 'Paris', 'Berlin']
+  }
+};
+
+// Stacked Bar Chart
+const stackedChartData: ChartSeries[] = [
+  {
+    name: 'Product A',
+    data: [44, 55, 41, 67, 22, 43]
+  },
+  {
+    name: 'Product B',
+    data: [13, 23, 20, 8, 13, 27]
+  },
+  {
+    name: 'Product C',
+    data: [11, 17, 15, 15, 21, 14]
+  }
+];
+
+const stackedChartOptions: ChartOptions = {
+  xaxis: {
+    categories: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6']
+  }
+};
+
+// Range Chart
+const rangeLoading = ref(false);
+const selectedRange = ref<'24h' | '7d' | '1m' | '3m' | 'all'>('7d');
+const timeRanges: Array<'24h' | '7d' | '1m' | '3m' | 'all'> = ['24h', '7d', '1m', '3m', 'all'];
+
+const rangeChartData = ref<ChartSeries[]>([
+  {
+    name: 'Users',
+    data: [30, 40, 45, 50, 49, 60, 70]
+  }
+]);
+
+const rangeChartOptions: ChartOptions = {
+  xaxis: {
+    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  }
+};
+
+function handleRangeChange(data: { range: ChartDateRange; chartId: string }) {
+  console.log('Range changed:', data);
+  rangeLoading.value = true;
+  setTimeout(() => {
+    // Simulate data fetch
+    rangeChartData.value = [
+      {
+        name: 'Users',
+        data: Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))
+      }
+    ];
+    rangeLoading.value = false;
+  }, 1000);
+}
+
+// Loading Chart
+const isLoadingChart = ref(false);
+const loadingChartData = ref<ChartSeries[]>([
+  {
+    name: 'Data',
+    data: [10, 20, 30, 40, 50]
+  }
+]);
+
+function toggleLoadingChart() {
+  isLoadingChart.value = !isLoadingChart.value;
+}
+
+// Annotation Chart
+const annotationChartData: ChartSeries[] = [
+  {
+    name: 'Response Time',
+    data: [120, 150, 170, 140, 160, 180, 200, 190]
+  }
+];
+
+const annotationChartOptions: ChartOptions = {
+  xaxis: {
+    categories: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
+  }
+};
+
+const annotation: ChartAnnotation = {
+  text: 'Target: 150ms',
+  high: 150
+};
+</script>