@kiva/kv-components 3.42.0 → 3.43.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.43.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.42.0...@kiva/kv-components@3.43.0) (2023-09-15)
+
+
+### Features
+
+* added label support ([c016a68](https://github.com/kiva/kv-ui-elements/commit/c016a683ae38ca5af66fa86576d88abd0066d719))
+* line graph can now just take values and normalization happens in component ([3f706be](https://github.com/kiva/kv-ui-elements/commit/3f706be31b288b64e4a566746bd7d0530ce25650))
+* ported over Shua's line graph using clip path and made slight CSS tweaks to match mocks ([56ac312](https://github.com/kiva/kv-ui-elements/commit/56ac312924eecdf56e2d9d99082643e6d42f7765))
+* simple unit tests and small fixes related to tests ([43700fa](https://github.com/kiva/kv-ui-elements/commit/43700faf6c1f0c76432107c3a658539bd3bf6c7b))
+
+
+
+
+
 # [3.42.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.41.0...@kiva/kv-components@3.42.0) (2023-09-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.42.0",
+  "version": "3.43.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "5ce65863bbb21ba1ace0ac77c2afd89318410365"
+  "gitHead": "023c2d950460478d6c3684d3d09906f9d9672f35"
 }

package/tests/unit/specs/components/KvLineGraph.spec.js

@@ -0,0 +1,58 @@
+import { render } from '@testing-library/vue';
+import { axe } from 'jest-axe';
+import KvLineGraph from '../../../../vue/KvLineGraph.vue';
+
+describe('KvLineGraph', () => {
+	const points = [
+		{ value: 10 },
+		{ value: 20 },
+		{ value: 50 },
+		{ value: 60 },
+		{ value: 80 },
+	];
+
+	const pointsWithLabels = [
+		{ value: 10, label: '2014' },
+		{ value: 20, label: '2015' },
+		{ value: 50, label: '2016' },
+		{ value: 60, label: '2017' },
+		{ value: 80, label: '2018' },
+	];
+
+	it('should render chart with points', () => {
+		const { container } = render(KvLineGraph, { props: { points } });
+		const pointElements = container.querySelectorAll('span');
+
+		expect(pointElements.length).toBe(points.length);
+	});
+
+	it('should render chart with value labels', () => {
+		const { container } = render(KvLineGraph, { props: { points: pointsWithLabels } });
+		const pointElements = container.querySelectorAll('span');
+
+		expect(pointElements.length).toBe(points.length * 2);
+	});
+
+	it('should render chart with x-axis label', () => {
+		const { container } = render(KvLineGraph, { props: { points, axisLabel: 'People supported over time' } });
+		const label = container.querySelectorAll('h4');
+
+		expect(label.length).toBe(1);
+	});
+
+	it('should render chart with value labels and x-axis label', () => {
+		const { container } = render(KvLineGraph, { props: { points: pointsWithLabels, axisLabel: 'People supported over time' } });
+		const pointElements = container.querySelectorAll('span');
+		const label = container.querySelectorAll('h4');
+
+		expect(pointElements.length).toBe(points.length * 2);
+		expect(label.length).toBe(1);
+	});
+
+	it('should have no automated accessibility violations', async () => {
+		const { container } = render(KvLineGraph, { props: { points } });
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
+});

package/vue/KvLineGraph.vue

@@ -0,0 +1,128 @@
+<template>
+	<div class="tw-h-full tw-w-full tw-p-2.5">
+		<figure
+			class="tw-w-full tw-relative"
+			:style="{ height: graphHeight }"
+		>
+			<div
+				class="tw-w-full tw-h-full tw-bg-marigold-2 tw-opacity-low"
+				:style="{ clipPath: `polygon(${shade}, 100% 100%, 0% 100%)` }"
+			></div>
+			<div
+				class="tw-absolute tw-top-0 tw-w-full tw-h-full tw-bg-marigold-2"
+				:style="{ clipPath: `polygon(${line})` }"
+			></div>
+			<span
+				v-for="point in normalizedPoints"
+				:key="point.x"
+				class="
+					tw-absolute
+					tw-w-2
+					tw-h-2
+					tw-border
+					tw-border-white
+					tw-bg-marigold-2
+					tw-rounded-full
+				"
+				:style="{ left: `${point.x}%`, top: `${point.y}%`, transform: 'translate(-50%, -50%)' }"
+			></span>
+			<template v-for="point in normalizedPoints">
+				<span
+					v-if="point.label"
+					:key="point.label"
+					class="tw-absolute"
+					:style="{ left: `${point.x}%`, bottom: '-3rem', transform: 'translate(-50%, -50%)' }"
+				>
+					{{ point.label }}
+				</span>
+			</template>
+		</figure>
+		<h4
+			v-if="axisLabel"
+			class="tw-text-center"
+			:class="{ 'tw-pt-1': !hasValueLabels, 'tw-pt-6': hasValueLabels }"
+		>
+			{{ axisLabel }}
+		</h4>
+	</div>
+</template>
+
+<script>
+import { computed, toRefs } from 'vue-demi';
+
+export default {
+	props: {
+		/**
+		 * Array of objects like [{ value: 10, label: '2014' }, { value: 20, label: '2015' }]
+		 */
+		points: {
+			type: Array,
+			required: true,
+		},
+		/**
+		 * The optional label to show below the graph on the x-axis
+		 */
+		axisLabel: {
+			type: String,
+			default: '',
+		},
+	},
+	setup(props) {
+		const { points, axisLabel } = toRefs(props);
+
+		// Get step to use on x-axis
+		const xIncrement = Math.round(100 / (points.value.length - 1));
+
+		// Find the largest value to be used as the scale of the graph
+		const largestY = computed(() => {
+			return points.value.reduce((prev, current) => {
+				return prev > current.value ? prev : current.value;
+			}, 0);
+		});
+
+		// Find the largest value to be used as the scale of the graph
+		const hasValueLabels = computed(() => {
+			return points.value.reduce((prev, current) => {
+				return prev || !!current.label;
+			}, false);
+		});
+
+		// Convert single values to points using increment and largest value
+		const normalizedPoints = computed(() => {
+			return points.value.reduce((prev, next, i) => {
+				prev.push({
+					x: i * xIncrement,
+					y: 100 - ((next.value / largestY.value) * 100),
+					label: next.label,
+				});
+
+				return prev;
+			}, []);
+		});
+
+		// Used for drawing the shading under the line
+		const shade = computed(() => (normalizedPoints.value.map(({ x, y }) => `${x}% ${y}%`).join(',')));
+
+		// Used for drawing the line
+		const line = computed(() => {
+			const topLine = normalizedPoints.value.map(({ x, y }) => `${x}% ${y + 0.3}%`).join(',');
+			const bottomLine = [...normalizedPoints.value].reverse().map(({ x, y }) => `${x}% ${y - 0.3}%`).join(',');
+			return `${topLine}, ${bottomLine}`;
+		});
+
+		const graphHeight = computed(() => {
+			const labelSpace = (axisLabel.value ? 2 : 0) + (hasValueLabels.value ? 2 : 0);
+
+			return `calc(100% - ${labelSpace}rem)`;
+		});
+
+		return {
+			hasValueLabels,
+			graphHeight,
+			normalizedPoints,
+			shade,
+			line,
+		};
+	},
+};
+</script>

package/vue/stories/KvLineGraph.stories.js

@@ -0,0 +1,52 @@
+import KvLineGraph from '../KvLineGraph.vue';
+
+export default {
+	title: 'KvLineGraph',
+	component: KvLineGraph,
+};
+
+const Template = (_args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvLineGraph,
+	},
+	template: `
+		<div style="height: 500px; width: 500px;">
+			<kv-line-graph :points="points" :axis-label="axisLabel" />
+		</div>
+	`,
+});
+
+const points = [
+	{ value: 10 },
+	{ value: 20 },
+	{ value: 50 },
+	{ value: 60 },
+	{ value: 80 },
+];
+
+const pointsWithLabels = [
+	{ value: 10, label: '2014' },
+	{ value: 20, label: '2015' },
+	{ value: 50, label: '2016' },
+	{ value: 60, label: '2017' },
+	{ value: 80, label: '2018' },
+];
+
+export const Default = Template.bind();
+Default.args = { points };
+
+export const AxisLabel = Template.bind();
+AxisLabel.args = {
+	points,
+	axisLabel: 'People supported over time',
+};
+
+export const ValueLabels = Template.bind();
+ValueLabels.args = { points: pointsWithLabels };
+
+export const AllLabels = Template.bind();
+AllLabels.args = {
+	points: pointsWithLabels,
+	axisLabel: 'People supported over time',
+};