Charts Component

A time-series line chart built with d3, with zoom/pan and optional colored threshold bands (e.g. flood stage levels). LineChart is currently the only chart this package exports — despite the name, there's no bar chart (yet).

Features

• 🎯 TypeScript support with full type definitions

Installation

pnpm add @phila/phila-ui-charts @phila/phila-ui-core
# or
npm install @phila/phila-ui-charts @phila/phila-ui-core

Import core styles in your main entry file (e.g., main.js|ts):

import "@phila/phila-ui-core/styles/template-light.css";

Usage

<script setup lang="ts">
import { computed } from "vue";
import { LineChart } from "@phila/phila-ui-charts";

const data = computed(() => {
  if (!fetchedData.value) return [];
  return fetchedData.value.map(item => ({ x: item.date, y: item.value }));
});

const levelAreas = [
  { level: 11, color: "#FFFFE4", label: "Action 11ft" },
  { level: 12.5, color: "#FFF6E2", label: "Moderate 12.5ft" },
  { level: 14, color: "#FFE9E2", label: "Major 14ft" },
];
</script>

<template>
  <LineChart :data="data" :level-areas="levelAreas" y-label="Stage (in)" />
</template>

Props

LineChartProps is BaseProps & Partial<BaseChart> — every prop below is optional.

| Prop | Type | Default | Description | | ------------------- | -------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | id | string | auto-generated | Unique id for the chart's internal SVG elements. | | title | string | undefined | Optional chart title. | | width | number | 800 | SVG width in pixels. | | height | number | 400 | SVG height in pixels. | | margin | ChartMargins | { top: 20, right: 30, bottom: 30, left: 55 } | { top, right, bottom, left } in pixels. | | data | ChartData[] | [] | { x: string, y?: number }[] — the series to plot. | | xLabel | string | undefined | Optional x-axis label. | | yLabel | string | "Stage (in)" | Y-axis label. | | minimumYLevel | number | undefined | Floor for the y-axis, even if the data's minimum is higher. | | initialZoom | number | 7 | Initial zoom window, in days. | | levelAreas | LevelArea[] | [] | { level: number, color: string, label?: string }[] — horizontal threshold bands (e.g. flood stage levels). | | disableScrollZoom | boolean | false | Disables zooming the chart via mouse/trackpad scroll. | | className | string | undefined | Additional CSS classes. |

The chart also renders a built-in zoom control (1d/2d/7d/All, via TagGroup from @phila/phila-ui-tags).

Development

Install Dependencies

pnpm install

Run Demo

pnpm dev

Build Library

pnpm build

Run lint

pnpm lint

Type Check

pnpm type-check

Publishing to NPM

Follow the release instructions using changesets.

License

MIT