fix: convert areachart to working barchart in trend-chart.svelte and fixed empty data issue (#930)
Co-authored-by: richarddkenneth <[email protected]>
This commit is contained in:
Richard Kenneth
co-authored by
richarddkenneth
richarddkenneth
parent
913db2a525
commit
ce663fe365
@@ -26,37 +26,80 @@
|
||||
const chartConfig = $derived({
|
||||
views: {
|
||||
label: $t('analytics.trend.views'),
|
||||
color: 'var(--primary)'
|
||||
color: 'var(--chart-4)'
|
||||
},
|
||||
enrollments: {
|
||||
label: $t('analytics.trend.enrollments'),
|
||||
color: 'var(--chart-2, var(--primary))'
|
||||
color: 'var(--chart-2)'
|
||||
}
|
||||
} satisfies ChartConfig);
|
||||
|
||||
const series = [
|
||||
{ key: 'views', value: 'views', label: 'Views', color: 'var(--color-views)' },
|
||||
{ key: 'enrollments', value: 'enrollments', label: 'Enrollments', color: 'var(--color-enrollments)' }
|
||||
];
|
||||
const series = $derived([
|
||||
{
|
||||
key: 'views',
|
||||
label: chartConfig.views.label,
|
||||
color: chartConfig.views.color
|
||||
},
|
||||
{
|
||||
key: 'enrollments',
|
||||
label: chartConfig.enrollments.label,
|
||||
color: chartConfig.enrollments.color
|
||||
}
|
||||
]);
|
||||
|
||||
const hasData = $derived(
|
||||
(data?.sparkline.length ?? 0) > 0 && data?.sparkline.some((r) => r.views > 0 || r.enrollments > 0)
|
||||
let chartData = $derived(
|
||||
data?.sparkline.map((d) => {
|
||||
const [year, month, day] = d.date.split('-');
|
||||
const date = new Date(Number(year), Number(month) - 1, Number(day));
|
||||
return { ...d, date };
|
||||
})
|
||||
);
|
||||
|
||||
const hasData = $derived((chartData?.length ?? 0) > 0 && chartData?.some((r) => r.views > 0 || r.enrollments > 0));
|
||||
</script>
|
||||
|
||||
<AnalyticsPanelCard title={$t('analytics.trend.heading')} description={$t('analytics.trend.description')}>
|
||||
{#snippet children()}
|
||||
{#if loading && !data}
|
||||
{#if loading && !chartData}
|
||||
<div class="flex h-[280px] items-center justify-center">
|
||||
<Spinner class="ui:text-muted-foreground size-6" />
|
||||
</div>
|
||||
{:else if browser && hasData && data}
|
||||
{:else if browser && hasData && chartData}
|
||||
{#await loadChart() then C}
|
||||
<C.ChartContainer class="h-[280px] w-full" config={chartConfig}>
|
||||
<C.AreaChart data={data.sparkline} x="date" axis="x" {series} />
|
||||
<C.BarChart
|
||||
data={chartData}
|
||||
xScale={C.scaleBand().padding(0.25)}
|
||||
x="date"
|
||||
axis="x"
|
||||
seriesLayout="group"
|
||||
legend
|
||||
{series}
|
||||
props={{
|
||||
xAxis: {
|
||||
format: (d: Date) =>
|
||||
d.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
})
|
||||
}
|
||||
}}
|
||||
>
|
||||
{#snippet tooltip()}
|
||||
<C.Tooltip
|
||||
labelFormatter={(d: Date) =>
|
||||
d.toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
/>
|
||||
{/snippet}
|
||||
</C.BarChart>
|
||||
</C.ChartContainer>
|
||||
{/await}
|
||||
{:else if hasData && data}
|
||||
{:else if hasData && chartData}
|
||||
<div class="flex h-[280px] items-center justify-center">
|
||||
<Spinner class="ui:text-muted-foreground size-6" />
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
import * as Page from '@cio/ui/base/page';
|
||||
@@ -15,9 +14,8 @@
|
||||
analyticsApi
|
||||
} from '$features/analytics';
|
||||
|
||||
onMount(() => {
|
||||
const orgId = $currentOrg.id;
|
||||
if (orgId) analyticsApi.ensureFetched(orgId);
|
||||
$effect(() => {
|
||||
analyticsApi.ensureFetched($currentOrg.id);
|
||||
});
|
||||
|
||||
function handleRangeChange(days: 7 | 30 | 90) {
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
import * as Page from '@cio/ui/base/page';
|
||||
@@ -10,9 +9,8 @@
|
||||
import { StatusTiles, CourseBreakdown, LearnersTable, complianceApi } from '$features/compliance';
|
||||
import type { ComplianceLearnerRow } from '$features/compliance/utils/types';
|
||||
|
||||
onMount(() => {
|
||||
const orgId = $currentOrg.id;
|
||||
if (orgId) complianceApi.ensureFetched(orgId);
|
||||
$effect(() => {
|
||||
complianceApi.ensureFetched($currentOrg.id);
|
||||
});
|
||||
|
||||
function handleRefresh() {
|
||||
|
||||
@@ -56,9 +56,6 @@
|
||||
"esbuild",
|
||||
"@tailwindcss/oxide"
|
||||
],
|
||||
"patchedDependencies": {
|
||||
"[email protected]": "patches/[email protected]"
|
||||
},
|
||||
"overrides": {
|
||||
"zod": "4.2.1",
|
||||
"miniflare>zod": "3.22.3",
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
"bits-ui": "^2.16.1",
|
||||
"clsx": "^2.1.1",
|
||||
"jsrepo": "^3.5.1",
|
||||
"layerchart": "2.0.0-next.27",
|
||||
"layerchart": "2.2.0",
|
||||
"mode-watcher": "^1.1.0",
|
||||
"runed": "^0.37.1",
|
||||
"shiki": "^3.22.0",
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { getChartContext, Tooltip as TooltipPrimitive } from 'layerchart';
|
||||
import { cn, type WithElementRef, type WithoutChildren } from '../../tools';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import { getPayloadConfigFromPayload, useChart, type TooltipPayload } from './chart-utils';
|
||||
import { getTooltipContext, Tooltip as TooltipPrimitive } from 'layerchart';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
@@ -48,27 +48,39 @@
|
||||
} = $props();
|
||||
|
||||
const chart = useChart();
|
||||
const tooltipCtx = getTooltipContext();
|
||||
const chartCtx = getChartContext();
|
||||
|
||||
const visibleSeries = $derived(chartCtx.tooltip.series.filter((s) => s.value !== undefined));
|
||||
|
||||
const formattedLabel = $derived.by(() => {
|
||||
if (hideLabel || !tooltipCtx.payload?.length) return null;
|
||||
if (hideLabel || !visibleSeries?.length) return null;
|
||||
|
||||
const [item] = tooltipCtx.payload;
|
||||
const key = labelKey ?? item?.label ?? item?.name ?? 'value';
|
||||
const [item] = visibleSeries;
|
||||
const tooltipData = chartCtx.tooltip.data;
|
||||
|
||||
const itemConfig = getPayloadConfigFromPayload(chart.config, item, key);
|
||||
const dataLabel = tooltipData != null ? chartCtx.x(tooltipData) : undefined;
|
||||
|
||||
const value =
|
||||
!labelKey && typeof label === 'string'
|
||||
? (chart.config[label as keyof typeof chart.config]?.label ?? label)
|
||||
: (itemConfig?.label ?? item.label);
|
||||
const key = labelKey ?? item?.label ?? 'value';
|
||||
|
||||
let value: unknown;
|
||||
if (!labelKey && typeof label === 'string') {
|
||||
value = chart.config[label as keyof typeof chart.config]?.label ?? label;
|
||||
} else {
|
||||
const itemConfig = getPayloadConfigFromPayload(
|
||||
chart.config,
|
||||
item,
|
||||
key,
|
||||
tooltipData as Record<string, unknown> | null
|
||||
);
|
||||
value = itemConfig?.label ?? dataLabel;
|
||||
}
|
||||
|
||||
if (value === undefined) return null;
|
||||
if (!labelFormatter) return value;
|
||||
return labelFormatter(value, tooltipCtx.payload);
|
||||
return labelFormatter(value, visibleSeries);
|
||||
});
|
||||
|
||||
const nestLabel = $derived(tooltipCtx.payload.length === 1 && indicator !== 'dot');
|
||||
const nestLabel = $derived(visibleSeries.length === 1 && indicator !== 'dot');
|
||||
</script>
|
||||
|
||||
{#snippet TooltipLabel()}
|
||||
@@ -85,6 +97,7 @@
|
||||
|
||||
<TooltipPrimitive.Root variant="none">
|
||||
<div
|
||||
bind:this={ref}
|
||||
class={cn(
|
||||
'ui:border-border/50 ui:bg-background ui:grid ui:min-w-[9rem] ui:items-start ui:gap-1.5 ui:rounded-lg ui:border ui:px-2.5 ui:py-1.5 ui:text-xs ui:shadow-xl',
|
||||
className
|
||||
@@ -95,23 +108,23 @@
|
||||
{@render TooltipLabel()}
|
||||
{/if}
|
||||
<div class="ui:grid ui:gap-1.5">
|
||||
{#each tooltipCtx.payload as item, i (item.key + i)}
|
||||
{@const key = `${nameKey || item.key || item.name || 'value'}`}
|
||||
{@const itemConfig = getPayloadConfigFromPayload(chart.config, item, key)}
|
||||
{@const indicatorColor = color || item.payload?.color || item.color}
|
||||
{#each visibleSeries as item, i (item.key + i)}
|
||||
{@const key = `${nameKey || item.key || item.label || 'value'}`}
|
||||
{@const itemConfig = getPayloadConfigFromPayload(chart.config, item, key, chartCtx.tooltip.data)}
|
||||
{@const indicatorColor = color || item.config?.color || item.color}
|
||||
<div
|
||||
class={cn(
|
||||
'ui:[&>svg]:text-muted-foreground ui:flex ui:w-full ui:flex-wrap ui:items-stretch ui:gap-2 ui:[&>svg]:size-2.5',
|
||||
indicator === 'dot' && 'ui:items-center'
|
||||
)}
|
||||
>
|
||||
{#if formatter && item.value !== undefined && item.name}
|
||||
{#if formatter && item.value !== undefined && item.label}
|
||||
{@render formatter({
|
||||
value: item.value,
|
||||
name: item.name,
|
||||
name: item.label,
|
||||
item,
|
||||
index: i,
|
||||
payload: tooltipCtx.payload
|
||||
payload: visibleSeries
|
||||
})}
|
||||
{:else}
|
||||
{#if itemConfig?.icon}
|
||||
@@ -138,7 +151,7 @@
|
||||
{@render TooltipLabel()}
|
||||
{/if}
|
||||
<span class="ui:text-muted-foreground">
|
||||
{itemConfig?.label || item.name}
|
||||
{itemConfig?.label || item.label}
|
||||
</span>
|
||||
</div>
|
||||
{#if item.value !== undefined}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { Tooltip } from 'layerchart';
|
||||
import { getContext, setContext, type Component, type ComponentProps, type Snippet } from 'svelte';
|
||||
import { getContext, setContext, type Snippet } from 'svelte';
|
||||
import type { ChartConfig } from './types';
|
||||
|
||||
export type { ChartConfig } from './types';
|
||||
@@ -14,31 +14,37 @@ export type ChartLegendItem = {
|
||||
|
||||
export type ExtractSnippetParams<T> = T extends Snippet<[infer P]> ? P : never;
|
||||
|
||||
export type TooltipPayload = ExtractSnippetParams<ComponentProps<typeof Tooltip.Root>['children']>['payload'][number];
|
||||
export type TooltipPayload = Tooltip.TooltipSeries;
|
||||
|
||||
// Helper to extract item config from a payload.
|
||||
export function getPayloadConfigFromPayload(config: ChartConfig, payload: TooltipPayload, key: string) {
|
||||
export function getPayloadConfigFromPayload(
|
||||
config: ChartConfig,
|
||||
payload: TooltipPayload,
|
||||
key: string,
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
data?: Record<string, any> | null
|
||||
) {
|
||||
if (typeof payload !== 'object' || payload === null) return undefined;
|
||||
|
||||
const payloadPayload =
|
||||
'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null
|
||||
? payload.payload
|
||||
: undefined;
|
||||
const payloadConfig =
|
||||
'config' in payload && typeof payload.config === 'object' && payload.config !== null ? payload.config : undefined;
|
||||
|
||||
let configLabelKey: string = key;
|
||||
|
||||
if (payload.key === key) {
|
||||
configLabelKey = payload.key;
|
||||
} else if (payload.name === key) {
|
||||
configLabelKey = payload.name;
|
||||
} else if (payload.label === key) {
|
||||
configLabelKey = payload.label;
|
||||
} else if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {
|
||||
configLabelKey = payload[key as keyof typeof payload] as string;
|
||||
} else if (
|
||||
payloadPayload !== undefined &&
|
||||
key in payloadPayload &&
|
||||
typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
|
||||
payloadConfig !== undefined &&
|
||||
key in payloadConfig &&
|
||||
typeof payloadConfig[key as keyof typeof payloadConfig] === 'string'
|
||||
) {
|
||||
configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
|
||||
configLabelKey = payloadConfig[key as keyof typeof payloadConfig] as string;
|
||||
} else if (data != null && key in data && typeof data[key] === 'string') {
|
||||
configLabelKey = data[key] as string;
|
||||
}
|
||||
|
||||
return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
diff --git a/dist/components/MonthPath.svelte b/dist/components/MonthPath.svelte
|
||||
index 3ca6c1ec5bf10f2ebacceb0743d7844860bac057..5e3d4246a5d66b4643839c749eee00c8319c788c 100644
|
||||
--- a/dist/components/MonthPath.svelte
|
||||
+++ b/dist/components/MonthPath.svelte
|
||||
@@ -30,7 +30,7 @@
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
- import { timeWeek, timeMonth, timeYear } from 'd3-time';
|
||||
+ import { timeWeek, timeYear } from 'd3-time';
|
||||
import { cls } from '@layerstack/tailwind';
|
||||
import { endOfInterval } from '@layerstack/utils';
|
||||
import { layerClass } from '../utils/attributes.js';
|
||||
diff --git a/dist/utils/ticks.js b/dist/utils/ticks.js
|
||||
index 9f82ad72a077c08b55f32c8fd8fa6c5d5f212d3f..5b56ed837beef7054324711853eee46c5819f9f9 100644
|
||||
--- a/dist/utils/ticks.js
|
||||
+++ b/dist/utils/ticks.js
|
||||
@@ -1,4 +1,4 @@
|
||||
-import { timeYear, timeMonth, timeDay, timeTicks } from 'd3-time';
|
||||
+import { timeYear, timeDay, timeTicks } from 'd3-time';
|
||||
import { format, Duration, isLiteralObject, DateToken, } from '@layerstack/utils';
|
||||
import { isScaleBand, isScaleTime } from './scales.svelte.js';
|
||||
export function getDurationFormat(duration, options = {
|
||||
Generated
+98
-89
Reference in New Issue
Block a user