Skip to content

Commit d7360e3

Browse files
aguingandaguingand
committed
wip
1 parent e9e29f0 commit d7360e3

File tree

7 files changed

+145
-150
lines changed

7 files changed

+145
-150
lines changed

‎demo/app/Sharp/Dashboard/DemoDashboard.php‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ protected function buildWidgets(WidgetsContainer $widgetsContainer): void
5252
SharpBarGraphWidget::make('authors_bar')
5353
->setTitle('Posts by author')
5454
->setShowLegend(false)
55-
->setHorizontal(),
55+
// ->setHorizontal(),
5656
)
5757
->addWidget(
5858
SharpPieGraphWidget::make('categories_pie')
@@ -63,6 +63,7 @@ protected function buildWidgets(WidgetsContainer $widgetsContainer): void
6363
->setTitle('Visits')
6464
->setHeight(200)
6565
->setShowLegend()
66+
->setDisplayHorizontalAxisAsTimeline()
6667
// ->setMinimal()
6768
->setCurvedLines(),
6869
)
@@ -176,7 +177,8 @@ protected function setLineGraphDataSet(): void
176177
{
177178
$visits = collect(CarbonPeriod::create($this->getStartDate(), $this->getEndDate()))
178179
->mapWithKeys(function (Carbon $day, $k) {
179-
return [$day->isoFormat('L') => (int) (rand(10000, 20000) * 1.02)];
180+
// return [$day->isoFormat('L') => (int) (rand(10000, 20000) * 1.02)];
181+
return [$day->format('Y-m-d') => (int) (rand(10000, 20000) * 1.02)];
180182
});
181183

182184
$this
@@ -205,7 +207,7 @@ protected function setBarsGraphDataSet(): void
205207
)]
206208
)
207209
->orderBy('posts_count', 'desc')
208-
->limit(8)
210+
->limit(10)
209211
->get()
210212
->pluck('posts_count', 'name');
211213

‎demo/database/seeders/DatabaseSeeder.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ public function run()
2626
$editor2 = User::factory(['email' => '[email protected]'])
2727
->create();
2828

29+
User::factory(50)->create();
30+
2931
collect([$admin, $editor1, $editor2])
3032
->shuffle()
3133
->each(function (User $user, int $k) {

‎resources/js/dashboard/components/widgets/graph/Bar.vue‎

Lines changed: 59 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,82 @@
11
<script setup lang="ts">
22
import { GraphWidgetData } from "@/types";
33
import { DashboardWidgetProps } from "@/dashboard/types";
4-
import { VisXYContainer, VisAxis, VisStackedBar, VisGroupedBar, VisTooltip, VisBulletLegend } from "@unovis/vue";
5-
import { AxisConfigInterface, Scale, StackedBar } from '@unovis/ts'
6-
import { useXYChart } from "@/dashboard/components/widgets/graph/useXYChart";
4+
import { VisAxis, VisBulletLegend, VisCrosshair, VisGroupedBar, VisTooltip, VisXYContainer } from "@unovis/vue";
5+
import {
6+
AxisConfigInterface,
7+
BulletLegendConfigInterface, CrosshairConfigInterface,
8+
FitMode,
9+
GroupedBar,
10+
GroupedBarConfigInterface,
11+
TextAlign,
12+
TooltipConfigInterface,
13+
TrimMode,
14+
} from '@unovis/ts'
15+
import { Datum, useXYChart } from "@/dashboard/components/widgets/graph/useXYChart";
16+
import { computed } from "vue";
717
818
const props = defineProps<DashboardWidgetProps<GraphWidgetData>>();
919
10-
const { data, x, y } = useXYChart(props);
20+
const { data, x, y, color, tooltipTemplate } = useXYChart(props);
21+
1122
const tickFormat: AxisConfigInterface<number[]>['tickFormat'] = (tick) => {
1223
return props.value?.labels?.[tick as number] || '';
1324
}
25+
26+
const rotate = computed(() => props.value?.labels?.length >= 10);
1427
</script>
1528

1629
<template>
17-
<div :class="{ 'mb-2': widget.showLegend && !widget.minimal }">
18-
<VisXYContainer >
19-
<!-- :x-scale="props.widget.dateLabels ? Scale.scaleTime() : Scale.scaleLinear()" -->
30+
<div class="flex flex-col gap-4">
31+
<VisXYContainer class="flex-1 min-h-0" :data="data">
2032
<template v-if="!props.widget.minimal">
21-
<VisAxis :type="widget.options?.horizontal ? 'x' : 'y'" />
22-
<VisAxis :type="widget.options?.horizontal ? 'y' : 'x'"
23-
:tickValues="props.value?.labels.map((_, i) => i)"
24-
:tickFormat="tickFormat"
33+
<VisAxis
34+
v-bind="{
35+
type: widget.options?.horizontal ? 'x' : 'y',
36+
} as AxisConfigInterface<Datum>"
37+
/>
38+
<VisAxis
39+
v-bind="{
40+
type: widget.options?.horizontal ? 'y' : 'x',
41+
// tickValues: props.value?.labels.map((_, i) => i),
42+
numTicks: props.value?.labels.length - 1,
43+
tickFormat: tickFormat,
44+
tickTextTrimType: TrimMode.End,
45+
tickTextAlign: rotate ? TextAlign.Left : TextAlign.Center,
46+
tickTextFitMode: rotate ? FitMode.Wrap : FitMode.Trim,
47+
tickTextAngle: rotate ? 45 : undefined,
48+
tickTextWidth: rotate ? 100 : undefined,
49+
} as AxisConfigInterface<Datum>"
2550
/>
2651
</template>
2752

28-
<VisGroupedBar
29-
:data="data"
30-
:x="x"
31-
:y="y"
32-
:orientation="widget.options?.horizontal ? 'horizontal' : 'vertical'"
33-
:color="(_, i) => props.value?.datasets[i].color"
53+
<VisCrosshair
54+
v-bind="{
55+
color: color,
56+
template: tooltipTemplate,
57+
// hideWhenFarFromPointer: false,
58+
} as CrosshairConfigInterface<Datum>"
3459
/>
3560

36-
<VisTooltip />
61+
<VisGroupedBar
62+
v-bind="{
63+
x: x,
64+
y: y,
65+
orientation: widget.options?.horizontal ? 'horizontal' : 'vertical',
66+
color: color,
67+
} as GroupedBarConfigInterface<Datum>"
68+
/>
69+
<VisTooltip v-bind="{ triggers: { [GroupedBar.selectors.root]: tooltipTemplate } } as TooltipConfigInterface" />
3770
</VisXYContainer>
71+
3872
<template v-if="widget.showLegend && !widget.minimal">
39-
<VisBulletLegend :items="props.value.datasets?.map(dataset => ({ name: dataset.label, color: dataset.color }))" />
73+
<div class="flex justify-center">
74+
<VisBulletLegend
75+
v-bind="{
76+
items: props.value.datasets?.map(dataset => ({ name: dataset.label, color: dataset.color })),
77+
} as BulletLegendConfigInterface"
78+
/>
79+
</div>
4080
</template>
4181
</div>
4282
</template>

‎resources/js/dashboard/components/widgets/graph/Line.vue‎

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
<script setup lang="ts">
22
import { GraphWidgetData } from "@/types";
33
import { DashboardWidgetProps } from "@/dashboard/types";
4-
import { VisXYContainer, VisAxis, VisLine, VisTooltip, VisBulletLegend, VisCrosshair } from "@unovis/vue";
5-
import { AxisConfigInterface, CurveType } from "@unovis/ts";
6-
import { useXYChart } from "@/dashboard/components/widgets/graph/useXYChart";
4+
import { VisXYContainer, VisAxis, VisLine, VisTooltip, VisBulletLegend, VisCrosshair, VisScatter } from "@unovis/vue";
5+
import {
6+
AxisConfigInterface, BulletLegendConfigInterface,
7+
CrosshairConfigInterface,
8+
CurveType,
9+
LineConfigInterface, ScatterConfigInterface, XYContainerConfigInterface,
10+
} from "@unovis/ts";
11+
import { Datum, useXYChart } from "@/dashboard/components/widgets/graph/useXYChart";
712
813
const props = defineProps<DashboardWidgetProps<GraphWidgetData>>();
914
10-
const { data, x, y } = useXYChart(props);
15+
const { data, x, y, color, tooltipTemplate } = useXYChart(props);
1116
1217
const tickFormat: AxisConfigInterface<number[]>['tickFormat'] = (tick) => {
1318
return props.value?.labels?.[tick as number];
@@ -16,26 +21,48 @@
1621

1722
<template>
1823
<div class="mt-2">
19-
<VisXYContainer :data="data">
24+
<VisXYContainer v-bind="{} as XYContainerConfigInterface<Datum>" :data="data">
2025
<template v-if="!props.widget.minimal">
21-
<VisAxis type="x" :tickFormat="tickFormat" />
22-
<VisAxis type="y" />
26+
<VisAxis
27+
v-bind="{
28+
type: 'x',
29+
tickFormat: tickFormat,
30+
// numTicks: props.value?.labels.length / 2,
31+
} as AxisConfigInterface<Datum>"
32+
/>
33+
<VisAxis v-bind="{ type: 'y' } as AxisConfigInterface<Datum>" />
2334
</template>
2435

2536
<VisLine
26-
:x="x"
27-
:y="y"
28-
:color="(_, i) => props.value?.datasets[i].color"
29-
:curveType="props.widget.options.curved ? CurveType.MonotoneX : CurveType.Linear"
37+
v-bind="{
38+
x: x,
39+
y: y,
40+
color: color,
41+
curveType: props.widget.options.curved ? CurveType.MonotoneX : CurveType.Linear,
42+
} as LineConfigInterface<Datum>"
3043
/>
3144

32-
<VisCrosshair :color="(_, i) => props.value?.datasets[i].color" />
45+
<VisCrosshair
46+
v-bind="{
47+
color: color,
48+
template: tooltipTemplate,
49+
hideWhenFarFromPointer: false,
50+
} as CrosshairConfigInterface<Datum>"
51+
/>
3352

34-
<VisTooltip />
53+
<template v-for="dataset in props.value?.datasets">
54+
<VisScatter
55+
v-bind="{ size: 5, x: x, y: y, color: color } as ScatterConfigInterface<Datum>"
56+
/>
57+
</template>
3558
</VisXYContainer>
3659
<template v-if="props.widget.showLegend && !props.widget.minimal">
3760
<div class="mt-4 flex justify-center">
38-
<VisBulletLegend :items="props.value.datasets?.map(dataset => ({ name: dataset.label, color: dataset.color }))" />
61+
<VisBulletLegend
62+
v-bind="{
63+
items: props.value.datasets?.map(dataset => ({ name: dataset.label, color: dataset.color })),
64+
} as BulletLegendConfigInterface"
65+
/>
3966
</div>
4067
</template>
4168
</div>

‎resources/js/dashboard/components/widgets/graph/Pie.vue‎

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,37 @@
22
import { computed } from "vue";
33
import { GraphWidgetData } from "@/types";
44
import { DashboardWidgetProps } from "@/dashboard/types";
5-
import { useBreakpoints } from "@/composables/useBreakpoints";
65
import { VisSingleContainer, VisDonut, VisTooltip, VisBulletLegend } from "@unovis/vue";
6+
import { BulletLegendConfigInterface, DonutConfigInterface } from "@unovis/ts";
77
88
const props = defineProps<DashboardWidgetProps<GraphWidgetData>>();
99
10-
const breakpoints = useBreakpoints();
11-
12-
const datasets = computed(() => (props.value?.datasets ?? []).filter(d => (d.data?.length ?? 0) > 0));
13-
const items = computed(() => datasets.value.map(dataset => ({
10+
const data = computed(() => props.value?.datasets?.map(dataset => ({
1411
name: dataset.label ?? '',
1512
color: dataset.color,
1613
value: dataset.data[0] ?? 0,
1714
})));
18-
const showLegend = computed(() => props.widget.showLegend && !props.widget.minimal);
19-
const height = computed(() => props.widget.height ?? '100%');
2015
</script>
2116

2217
<template>
23-
<div>
24-
<div class="min-h-[250px] sm:min-h-0" :class="breakpoints.sm ? 'sm:flex sm:items-center sm:gap-4' : ''">
25-
<VisSingleContainer :style="{ height }">
26-
<VisDonut
27-
:data="items"
28-
:value="d => d.value"
29-
:category="d => d.name"
30-
:color="d => d.color"
31-
:innerRadius="0"
32-
/>
33-
<VisTooltip />
34-
</VisSingleContainer>
18+
<div class="min-h-[250px] sm:min-h-0 flex flex-col gap-y-2 gap-x-4 sm:flex-row sm:items-center sm:gap-4">
19+
<VisSingleContainer>
20+
<VisDonut
21+
v-bind="{
22+
data: data,
23+
value: d => d.value,
24+
color: d => d.color,
25+
} as DonutConfigInterface<typeof data[number]>"
26+
/>
27+
<VisTooltip />
28+
</VisSingleContainer>
3529

36-
<div v-if="showLegend" :class="breakpoints.sm ? 'sm:ml-4' : 'mt-2'">
37-
<VisBulletLegend :items="props.value.datasets?.map(dataset => ({ name: dataset.label, color: dataset.color }))" />
38-
</div>
39-
</div>
30+
<template v-if="props.widget.showLegend && !props.widget.minimal">
31+
<VisBulletLegend
32+
v-bind="{
33+
items: props.value.datasets?.map(dataset => ({ name: dataset.label, color: dataset.color })),
34+
} as BulletLegendConfigInterface"
35+
/>
36+
</template>
4037
</div>
4138
</template>

‎resources/js/dashboard/components/widgets/graph/useApexCharts.ts‎

Lines changed: 0 additions & 88 deletions
This file was deleted.

0 commit comments

Comments
 (0)