@wick-charts/vue 0.4.1 → 0.5.0

package/src/ui/ReferenceLine.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { ReferenceLineStyle, TimeValue } from '@wick-charts/core';
+import { onMounted, onUnmounted, watch } from 'vue';
+
+import { useChartInstance } from '../context';
+
+const props = defineProps<{
+  /** Horizontal line at this Y data value. Mutually exclusive with `time`. */
+  value?: number;
+  /** Vertical line at this `time` (epoch ms or `Date`). Mutually exclusive with `value`. */
+  time?: TimeValue;
+  /** Line and label-pill color. Default: the theme line color. */
+  color?: string;
+  /** Optional text label drawn in a pill at the line's near end. */
+  label?: string;
+  /** Dash style. Default: `'dashed'`. */
+  style?: ReferenceLineStyle;
+  /** Stroke width in CSS pixels. Default: `1`. */
+  width?: number;
+}>();
+
+const chart = useChartInstance();
+let lineId: string | null = null;
+
+onMounted(() => {
+  lineId = chart.addLine({
+    value: props.value,
+    time: props.time,
+    color: props.color,
+    label: props.label,
+    style: props.style,
+    width: props.width,
+  });
+});
+
+onUnmounted(() => {
+  if (lineId !== null) chart.removeLine(lineId);
+  lineId = null;
+});
+
+watch(
+  () => [props.value, props.time, props.color, props.label, props.style, props.width],
+  () => {
+    if (lineId === null) return;
+
+    chart.updateLine(lineId, {
+      value: props.value,
+      time: props.time,
+      color: props.color,
+      label: props.label,
+      style: props.style,
+      width: props.width,
+    });
+  },
+);
+</script>
+
+<template><span v-if="false" /></template>

package/src/ui/TimeRegion.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { TimeRegionEnd, TimeValue } from '@wick-charts/core';
+import { onMounted, onUnmounted, watch } from 'vue';
+
+import { useChartInstance } from '../context';
+
+const props = defineProps<{
+  /** Left edge — epoch ms or a `Date`. */
+  from: TimeValue;
+  /** Right edge — epoch ms or a `Date`. Omit (or pass `'now'`) for an open-ended band to the right edge. */
+  to?: TimeRegionEnd;
+  /** Band fill — any CSS color, typically translucent. Default: a faint tint of `color`. */
+  fill?: string;
+  /** Optional text label drawn in a pill at the top of the band. */
+  label?: string;
+  /** Edge-line and label-pill accent. Default: the theme's muted axis text color. */
+  color?: string;
+}>();
+
+const chart = useChartInstance();
+let regionId: string | null = null;
+
+onMounted(() => {
+  regionId = chart.addRegion({
+    from: props.from,
+    to: props.to,
+    fill: props.fill,
+    label: props.label,
+    color: props.color,
+  });
+});
+
+onUnmounted(() => {
+  if (regionId !== null) chart.removeRegion(regionId);
+  regionId = null;
+});
+
+watch(
+  () => [props.from, props.to, props.fill, props.label, props.color],
+  () => {
+    if (regionId === null) return;
+
+    chart.updateRegion(regionId, {
+      from: props.from,
+      to: props.to,
+      fill: props.fill,
+      label: props.label,
+      color: props.color,
+    });
+  },
+);
+</script>
+
+<template><span v-if="false" /></template>