mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-24 06:28:42 +01:00
9f3a256334
* feat: moves to tailwindcss and better component library * update styles * creates toggle component * adds drop down component * cleans up components * removes unused components * uses tailwind for scroll view * removes table component * improves animation * cleans up more styles * uses more tailwind * cleans up more styles with flex * more styles * removes bulma * adds colors * updates modules * fixes bugs * stops importing styles.scss * more clean up * cleans up headers * cleans up title * fixes title * fixes mobile-hidden * fixes shadow * fixes colors * add tailwindcss/nesting * adds more colors * fixes more colors * updates colors * fixes colors * colors * fixes menu on left * menu and modal * menu and modal * fuzzy search * fixes menu on left * remove logs * cleans up search * adds host to search * remove outline from inputs * cleans up left search icon * removes unused styles * fixes docker * removes sass! * cleans up styles * Fixe smobile menu * fixes mobile menu * fixes typecheck * fixes seconday color * adds drop down for container * cleans header css * updates css * fixes other layouts * updates some tests * fixes border * fixes home screen font * fixes top header * fixes tests * fixes fieldlist * fixes complex * cleans up more * removes index * fixes tests * fixes tests * resolves conflicts
45 lines
1.3 KiB
Vue
45 lines
1.3 KiB
Vue
<template>
|
|
<svg :width="width" :height="height" @mousemove="onMove" class="group">
|
|
<path :d="path" class="fill-primary" />
|
|
<line :x1="lineX" y1="0" :x2="lineX" :y2="height" class="invisible stroke-secondary stroke-2 group-hover:visible" />
|
|
</svg>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { extent } from "d3-array";
|
|
import { scaleLinear } from "d3-scale";
|
|
import { area, curveStep } from "d3-shape";
|
|
|
|
const d3 = { extent, scaleLinear, area, curveStep };
|
|
const { data, width = 150, height = 30 } = defineProps<{ data: Point<unknown>[]; width?: number; height?: number }>();
|
|
const x = d3.scaleLinear().range([width, 0]);
|
|
const y = d3.scaleLinear().range([height, 0]);
|
|
|
|
const selectedPoint = defineEmit<[value: Point<unknown>]>();
|
|
|
|
const shape = d3
|
|
.area<Point<unknown>>()
|
|
.curve(d3.curveStep)
|
|
.x((d) => x(d.x))
|
|
.y0(height)
|
|
.y1((d) => y(d.y));
|
|
|
|
const path = computed(() => {
|
|
x.domain(d3.extent(data, (d) => d.x) as [number, number]);
|
|
y.domain(d3.extent([...data, { y: 1 }], (d) => d.y) as [number, number]);
|
|
|
|
return shape(data) ?? "";
|
|
});
|
|
|
|
let lineX = $ref(0);
|
|
|
|
function onMove(e: MouseEvent) {
|
|
const { offsetX } = e;
|
|
const xValue = x.invert(offsetX);
|
|
const index = Math.round(xValue);
|
|
lineX = x(index);
|
|
const point = data[index];
|
|
selectedPoint(point);
|
|
}
|
|
</script>
|