@escalated-dev/escalated 0.7.0 → 0.8.0

package/src/components/ReportChart.vue

@@ -0,0 +1,395 @@
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'bar',
+        validator: (v) => ['line', 'bar', 'area', 'histogram', 'stacked-bar', 'pie'].includes(v),
+    },
+    data: { type: Array, default: () => [] },
+    title: { type: String, default: '' },
+    height: { type: Number, default: 240 },
+    colors: { type: Array, default: () => ['#06b6d4', '#8b5cf6', '#f59e0b', '#10b981', '#ef4444', '#3b82f6'] },
+    xLabel: { type: String, default: '' },
+    yLabel: { type: String, default: '' },
+    stacked: { type: Boolean, default: false },
+});
+
+const svgRef = ref(null);
+const tooltip = ref({ show: false, x: 0, y: 0, label: '', value: '' });
+const animated = ref(false);
+
+onMounted(() => {
+    setTimeout(() => {
+        animated.value = true;
+    }, 50);
+});
+
+const padding = { top: 20, right: 20, bottom: 40, left: 50 };
+const chartWidth = 600;
+const chartHeight = computed(() => props.height);
+const innerWidth = chartWidth - padding.left - padding.right;
+const innerHeight = computed(() => chartHeight.value - padding.top - padding.bottom);
+
+const maxValue = computed(() => {
+    if (!props.data.length) return 1;
+    if (props.type === 'stacked-bar') {
+        return Math.max(
+            ...props.data.map((d) => {
+                const vals = Array.isArray(d.values) ? d.values : [d.value || 0];
+                return vals.reduce((a, b) => a + b, 0);
+            }),
+            1,
+        );
+    }
+    return Math.max(...props.data.map((d) => d.value || 0), 1);
+});
+
+const barWidth = computed(() => {
+    if (!props.data.length) return 0;
+    return Math.min(innerWidth / props.data.length - 4, 40);
+});
+
+const linePath = computed(() => {
+    if (!props.data.length) return '';
+    const stepX = innerWidth / Math.max(props.data.length - 1, 1);
+    return props.data
+        .map((d, i) => {
+            const x = padding.left + i * stepX;
+            const y = padding.top + innerHeight.value - (d.value / maxValue.value) * innerHeight.value;
+            return `${i === 0 ? 'M' : 'L'}${x},${y}`;
+        })
+        .join(' ');
+});
+
+const areaPath = computed(() => {
+    if (!props.data.length) return '';
+    const stepX = innerWidth / Math.max(props.data.length - 1, 1);
+    const baseline = padding.top + innerHeight.value;
+    const top = props.data
+        .map((d, i) => {
+            const x = padding.left + i * stepX;
+            const y = padding.top + innerHeight.value - (d.value / maxValue.value) * innerHeight.value;
+            return `${i === 0 ? 'M' : 'L'}${x},${y}`;
+        })
+        .join(' ');
+    const lastX = padding.left + (props.data.length - 1) * stepX;
+    return `${top} L${lastX},${baseline} L${padding.left},${baseline} Z`;
+});
+
+const yTicks = computed(() => {
+    const ticks = [];
+    const steps = 5;
+    for (let i = 0; i <= steps; i++) {
+        const val = Math.round((maxValue.value / steps) * i);
+        const y = padding.top + innerHeight.value - (val / maxValue.value) * innerHeight.value;
+        ticks.push({ value: val, y });
+    }
+    return ticks;
+});
+
+const pieSlices = computed(() => {
+    if (!props.data.length) return [];
+    const total = props.data.reduce((s, d) => s + (d.value || 0), 0);
+    if (total === 0) return [];
+    const cx = chartWidth / 2;
+    const cy = chartHeight.value / 2;
+    const r = Math.min(cx, cy) - 30;
+    let startAngle = -Math.PI / 2;
+    return props.data.map((d, i) => {
+        const angle = (d.value / total) * Math.PI * 2;
+        const endAngle = startAngle + angle;
+        const x1 = cx + r * Math.cos(startAngle);
+        const y1 = cy + r * Math.sin(startAngle);
+        const x2 = cx + r * Math.cos(endAngle);
+        const y2 = cy + r * Math.sin(endAngle);
+        const largeArc = angle > Math.PI ? 1 : 0;
+        const path = `M${cx},${cy} L${x1},${y1} A${r},${r} 0 ${largeArc} 1 ${x2},${y2} Z`;
+        const midAngle = startAngle + angle / 2;
+        const labelX = cx + r * 0.65 * Math.cos(midAngle);
+        const labelY = cy + r * 0.65 * Math.sin(midAngle);
+        startAngle = endAngle;
+        return {
+            path,
+            color: props.colors[i % props.colors.length],
+            label: d.label,
+            value: d.value,
+            percent: Math.round((d.value / total) * 100),
+            labelX,
+            labelY,
+        };
+    });
+});
+
+function showTooltip(event, label, value) {
+    const rect = svgRef.value?.getBoundingClientRect();
+    if (!rect) return;
+    tooltip.value = {
+        show: true,
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top - 10,
+        label,
+        value: typeof value === 'number' ? value.toLocaleString() : value,
+    };
+}
+
+function hideTooltip() {
+    tooltip.value.show = false;
+}
+
+function getBarX(index) {
+    const step = innerWidth / props.data.length;
+    return padding.left + index * step + (step - barWidth.value) / 2;
+}
+
+function getBarHeight(value) {
+    return (value / maxValue.value) * innerHeight.value;
+}
+
+function getBarY(value) {
+    return padding.top + innerHeight.value - getBarHeight(value);
+}
+</script>
+
+<template>
+    <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-5">
+        <h3 v-if="title" class="mb-4 text-sm font-semibold text-[var(--esc-panel-text-secondary)]">{{ title }}</h3>
+        <div
+            v-if="!data.length"
+            class="flex items-center justify-center py-12 text-sm text-[var(--esc-panel-text-muted)]"
+        >
+            No data available
+        </div>
+        <div v-else class="relative">
+            <svg
+                ref="svgRef"
+                :viewBox="`0 0 ${chartWidth} ${chartHeight}`"
+                class="w-full"
+                preserveAspectRatio="xMidYMid meet"
+            >
+                <!-- Grid lines -->
+                <template v-if="type !== 'pie'">
+                    <line
+                        v-for="tick in yTicks"
+                        :key="tick.value"
+                        :x1="padding.left"
+                        :y1="tick.y"
+                        :x2="chartWidth - padding.right"
+                        :y2="tick.y"
+                        stroke="var(--esc-panel-border, #333)"
+                        stroke-width="0.5"
+                        stroke-dasharray="4 4"
+                    />
+                    <text
+                        v-for="tick in yTicks"
+                        :key="'label-' + tick.value"
+                        :x="padding.left - 8"
+                        :y="tick.y + 4"
+                        text-anchor="end"
+                        class="fill-[var(--esc-panel-text-muted)] text-[10px]"
+                    >
+                        {{ tick.value }}
+                    </text>
+                </template>
+
+                <!-- Bar chart -->
+                <template v-if="type === 'bar' || type === 'histogram'">
+                    <rect
+                        v-for="(d, i) in data"
+                        :key="i"
+                        :x="getBarX(i)"
+                        :y="animated ? getBarY(d.value) : padding.top + innerHeight"
+                        :width="barWidth"
+                        :height="animated ? getBarHeight(d.value) : 0"
+                        :fill="d.color || colors[i % colors.length]"
+                        rx="3"
+                        class="transition-all duration-700 ease-out"
+                        style="cursor: pointer"
+                        @mouseenter="showTooltip($event, d.label, d.value)"
+                        @mouseleave="hideTooltip"
+                    />
+                    <text
+                        v-for="(d, i) in data"
+                        :key="'x-' + i"
+                        :x="getBarX(i) + barWidth / 2"
+                        :y="chartHeight - 8"
+                        text-anchor="middle"
+                        class="fill-[var(--esc-panel-text-muted)] text-[10px]"
+                    >
+                        {{ d.label?.length > 8 ? d.label.slice(0, 8) + '..' : d.label }}
+                    </text>
+                </template>
+
+                <!-- Stacked bar -->
+                <template v-if="type === 'stacked-bar'">
+                    <template v-for="(d, i) in data" :key="i">
+                        <rect
+                            v-for="(val, si) in d.values || [d.value]"
+                            :key="si"
+                            :x="getBarX(i)"
+                            :y="
+                                animated
+                                    ? getBarY((d.values || [d.value]).slice(0, si + 1).reduce((a, b) => a + b, 0))
+                                    : padding.top + innerHeight
+                            "
+                            :width="barWidth"
+                            :height="animated ? getBarHeight(val) : 0"
+                            :fill="colors[si % colors.length]"
+                            class="transition-all duration-700 ease-out"
+                            style="cursor: pointer"
+                            @mouseenter="showTooltip($event, d.label + ' (' + (d.seriesLabels?.[si] || si) + ')', val)"
+                            @mouseleave="hideTooltip"
+                        />
+                    </template>
+                    <text
+                        v-for="(d, i) in data"
+                        :key="'sx-' + i"
+                        :x="getBarX(i) + barWidth / 2"
+                        :y="chartHeight - 8"
+                        text-anchor="middle"
+                        class="fill-[var(--esc-panel-text-muted)] text-[10px]"
+                    >
+                        {{ d.label?.length > 8 ? d.label.slice(0, 8) + '..' : d.label }}
+                    </text>
+                </template>
+
+                <!-- Line chart -->
+                <template v-if="type === 'line'">
+                    <path
+                        :d="linePath"
+                        fill="none"
+                        :stroke="colors[0]"
+                        stroke-width="2.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class="transition-all duration-700"
+                    />
+                    <circle
+                        v-for="(d, i) in data"
+                        :key="i"
+                        :cx="padding.left + (innerWidth / Math.max(data.length - 1, 1)) * i"
+                        :cy="
+                            animated
+                                ? padding.top + innerHeight - (d.value / maxValue) * innerHeight
+                                : padding.top + innerHeight
+                        "
+                        r="4"
+                        :fill="colors[0]"
+                        class="transition-all duration-700 ease-out"
+                        style="cursor: pointer"
+                        @mouseenter="showTooltip($event, d.label, d.value)"
+                        @mouseleave="hideTooltip"
+                    />
+                    <text
+                        v-for="(d, i) in data"
+                        :key="'lx-' + i"
+                        :x="padding.left + (innerWidth / Math.max(data.length - 1, 1)) * i"
+                        :y="chartHeight - 8"
+                        text-anchor="middle"
+                        class="fill-[var(--esc-panel-text-muted)] text-[10px]"
+                    >
+                        {{ d.label?.length > 6 ? d.label.slice(0, 6) : d.label }}
+                    </text>
+                </template>
+
+                <!-- Area chart -->
+                <template v-if="type === 'area'">
+                    <defs>
+                        <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
+                            <stop offset="0%" :stop-color="colors[0]" stop-opacity="0.3" />
+                            <stop offset="100%" :stop-color="colors[0]" stop-opacity="0.02" />
+                        </linearGradient>
+                    </defs>
+                    <path :d="areaPath" fill="url(#areaGrad)" class="transition-all duration-700" />
+                    <path
+                        :d="linePath"
+                        fill="none"
+                        :stroke="colors[0]"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class="transition-all duration-700"
+                    />
+                    <circle
+                        v-for="(d, i) in data"
+                        :key="i"
+                        :cx="padding.left + (innerWidth / Math.max(data.length - 1, 1)) * i"
+                        :cy="
+                            animated
+                                ? padding.top + innerHeight - (d.value / maxValue) * innerHeight
+                                : padding.top + innerHeight
+                        "
+                        r="3.5"
+                        :fill="colors[0]"
+                        class="transition-all duration-700 ease-out"
+                        style="cursor: pointer"
+                        @mouseenter="showTooltip($event, d.label, d.value)"
+                        @mouseleave="hideTooltip"
+                    />
+                </template>
+
+                <!-- Pie chart -->
+                <template v-if="type === 'pie'">
+                    <path
+                        v-for="(slice, i) in pieSlices"
+                        :key="i"
+                        :d="slice.path"
+                        :fill="slice.color"
+                        stroke="var(--esc-panel-surface, #111)"
+                        stroke-width="2"
+                        style="cursor: pointer"
+                        @mouseenter="showTooltip($event, slice.label, `${slice.value} (${slice.percent}%)`)"
+                        @mouseleave="hideTooltip"
+                    />
+                    <text
+                        v-for="(slice, i) in pieSlices"
+                        :key="'pl-' + i"
+                        :x="slice.labelX"
+                        :y="slice.labelY"
+                        text-anchor="middle"
+                        class="fill-white text-[10px] font-medium"
+                    >
+                        {{ slice.percent }}%
+                    </text>
+                </template>
+
+                <!-- Axis labels -->
+                <text
+                    v-if="xLabel"
+                    :x="chartWidth / 2"
+                    :y="chartHeight - 2"
+                    text-anchor="middle"
+                    class="fill-[var(--esc-panel-text-muted)] text-[11px]"
+                >
+                    {{ xLabel }}
+                </text>
+            </svg>
+
+            <!-- Tooltip -->
+            <div
+                v-if="tooltip.show"
+                class="pointer-events-none absolute z-20 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-active)] px-3 py-2 text-xs shadow-lg"
+                :style="{ left: tooltip.x + 'px', top: tooltip.y + 'px', transform: 'translate(-50%, -100%)' }"
+            >
+                <div class="font-medium text-[var(--esc-panel-text)]">{{ tooltip.value }}</div>
+                <div class="text-[var(--esc-panel-text-muted)]">{{ tooltip.label }}</div>
+            </div>
+        </div>
+
+        <!-- Legend for stacked/pie -->
+        <div v-if="(type === 'pie' || type === 'stacked-bar') && data.length" class="mt-4 flex flex-wrap gap-3">
+            <div
+                v-for="(d, i) in type === 'pie' ? data : data[0]?.seriesLabels || []"
+                :key="i"
+                class="flex items-center gap-1.5"
+            >
+                <span
+                    class="inline-block h-2.5 w-2.5 rounded-full"
+                    :style="{ backgroundColor: colors[i % colors.length] }"
+                ></span>
+                <span class="text-xs text-[var(--esc-panel-text-muted)]">{{ type === 'pie' ? d.label : d }}</span>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/ReportExportButton.vue

@@ -0,0 +1,108 @@
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+    exportUrl: { type: String, default: '' },
+    reportName: { type: String, default: 'report' },
+    periodDays: { type: Number, default: 30 },
+});
+
+const open = ref(false);
+const loading = ref(false);
+
+async function exportAs(format) {
+    loading.value = true;
+    try {
+        const separator = props.exportUrl.includes('?') ? '&' : '?';
+        const url = props.exportUrl ? `${props.exportUrl}${separator}format=${format}&days=${props.periodDays}` : '#';
+
+        if (!props.exportUrl) {
+            const data = { report: props.reportName, format, period_days: props.periodDays };
+            const blob = new Blob([format === 'json' ? JSON.stringify(data, null, 2) : 'No export URL configured'], {
+                type: format === 'json' ? 'application/json' : 'text/csv',
+            });
+            const a = document.createElement('a');
+            a.href = URL.createObjectURL(blob);
+            a.download = `${props.reportName}-${props.periodDays}d.${format}`;
+            a.click();
+            URL.revokeObjectURL(a.href);
+        } else {
+            const response = await fetch(url);
+            const blob = await response.blob();
+            const a = document.createElement('a');
+            a.href = URL.createObjectURL(blob);
+            a.download = `${props.reportName}-${props.periodDays}d.${format}`;
+            a.click();
+            URL.revokeObjectURL(a.href);
+        }
+    } finally {
+        loading.value = false;
+        open.value = false;
+    }
+}
+</script>
+
+<template>
+    <div class="relative">
+        <button
+            class="flex items-center gap-2 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-3.5 py-1.5 text-sm font-medium text-[var(--esc-panel-text-tertiary)] transition-all hover:text-[var(--esc-panel-text-secondary)]"
+            @click="open = !open"
+        >
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
+                />
+            </svg>
+            <span>Export</span>
+            <svg v-if="loading" class="h-3.5 w-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+        </button>
+        <div
+            v-if="open"
+            class="absolute right-0 top-full z-10 mt-1 w-44 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] py-1 shadow-xl"
+        >
+            <button
+                class="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-hover)]"
+                @click="exportAs('csv')"
+            >
+                <svg
+                    class="h-4 w-4 text-[var(--esc-panel-text-muted)]"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+                    />
+                </svg>
+                Export as CSV
+            </button>
+            <button
+                class="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-hover)]"
+                @click="exportAs('json')"
+            >
+                <svg
+                    class="h-4 w-4 text-[var(--esc-panel-text-muted)]"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"
+                    />
+                </svg>
+                Export as JSON
+            </button>
+        </div>
+    </div>
+</template>