@coreusa/final-barline 0.1.0 → 0.1.5

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Coreus
+Copyright (c) 2026 @coreusa
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,12 +1,16 @@
 # Final Barline
 
+<img width="764" height="209" alt="image" src="https://github.com/user-attachments/assets/d2e7626f-95d9-4579-89eb-e8747d8008ab" />
+
 A high-performance SVG Chart library for Svelte 5. Supports bar and line type of graphs with option to export the graph and a wide support for customization. Responsive by default.
 
+**NOTE**: Final Barline is in early development 🛠️. Please file [issues](https://github.com/Coreusa/final-barline/issues) and we'll get to them as soon as we can. 
+
 <img width="630" height="496" alt="image" src="https://github.com/user-attachments/assets/ffe674c0-9fbc-4799-87ec-9bf275faa361" />
 
 <img width="630" height="496" alt="image" src="https://github.com/user-attachments/assets/2d67a102-5b6b-42f7-a49d-f5fcac708da7" />
 
-## General use
+## Get started
 
 ```sh
 # install Final Barline
@@ -20,9 +24,11 @@ npm install @coreusa/final-barline
 yarn add @coreusa/final-barline
 ```
 
+## General use
+
 ```sh
 # import the component
-import Barline from '@coreusa/final-barline';
+import { Barline } from '@coreusa/final-barline';
 ```
 
 ```sh
@@ -37,5 +43,68 @@ import Barline from '@coreusa/final-barline';
 	lineWidth={2}
 	yMaxValuePadding={1}
 />
+```
+
+## Data series
+
+Data is expected as an array of data series objects. Please note that each data series must have the same length, as different lengths is not currently supported.
+
+```sh
+# Data structure
+data = [
+ {
+   label: 'Some interesting data',
+   values: [0, 1, 2, 3, 4, 5]
+ },
+ {
+   label: 'Even more interesting data',
+   values: [15, 22, 14, 30, 20, 18]
+ },
+...and so on...
+]
+```
+
+## Custom X values
+By default x values are set to the index of the dataseries, meaning the X-axis will go from 0 -> N where N is the data series length. You can provide custom X values if the standard x values aren't desired:
+
+```sh
+# Setup custom X Values
+let customXValues = ['A', 'B', 'C', 'D', 'E', 'F']
 
+<Barline
+	data={data}
+	xValues={customXValues}
+	type="line"
+	height={400}
+	width={600}
+	title="Chart title"
+	lineWidth={2}
+	yMaxValuePadding={1}
+/>
 ```
+
+## Options
+Final Barline has a wide array of customization options to alter the chart to your liking.
+
+- `responsive` - Turn responsiveness of the chart on or off. Default: `TRUE`
+- `title` - Title of the chart. Placed top center if provided. Default: NONE
+- `width` - Provide a custom width for the chart. Note that this requires `responsive` to be `FALSE`
+- `height` - Provide a custom height for the chart. Default: `220`
+- `xValueSuffix` - Text placed after each X tick label (also shown in tooltip when hovering the graph)
+- `yValueSuffix` - Text placed after each Y tick label (also shown in tooltip header when hovering the graph)
+- `lineWidth` - Width of each data serie's graph line. Only applicable when `type = line` (line graph)
+- `paddingSides` - Provide your own padding to each side of the chart. Options are:
+- `paddingSides.left` - Padding to the left of the chart
+- `paddingSides.right` - Padding to the right of the chart
+- `paddingSides.top` - Padding to the top of the chart
+- `paddingSides.bottom` - Padding to the bottom of the chart
+- `xValueCulling` - By default all x values are shown. Sometimes when there are alot of data points, the graph will get unreadable. Use xValueCulling to limit how many x values are shown
+- `yValueCulling` - Same as `xValueCulling`, but for the y values
+- `xMin, xMax, yMin, yMax` - By default Final Barline calculates the min/max for x and y. If you'd instead like to set these values yourself, use these
+- `showLegend` - Turn on/off the data series legend. Default: `TRUE`
+- `xValuePrecision, yValuePrecision` - Number precision formatting to apply to the x and y values
+- `showHorizontalGridLines` - Whether or not to display horizontal (Y axis and to the right) gridlines. Default: `TRUE`
+- `showVerticalGridLines` - Whether or not to display vertical gridlines (X axis and down). Default: `TRUE`
+- `yMaxValuePadding` - Apply padding to the max value of Y. Useful if some additional space is needed at the top. Not to be confused with `paddingSides.top` which alters where the chart starts. Default: `0`
+
+_Header image credit: Square Enix_

package/dist/Barline.svelte

@@ -81,6 +81,7 @@
 	} = $props();
 
 	let chartContainerWidth = $state(0);
+	let tooltipWidth = $state(0);
 	let showGraphGrid = $state(true);
 	let svgChartElement: SVGSVGElement;
 	// Start position of the X/Y axis, to the right of the Y axis
@@ -117,9 +118,8 @@
 	const xScale = (x: number) => {
 		// TODO: Add padding to computedXMax if need for padding on the right side
 		// NOTE: Added padding to the right side to ensure scale factor has enough room
-		const ratio = (x - computedXMin) / (computedXMax + 1 - computedXMin);
-		const res =
-			chartSafetyMarginX / 2 + paddingSides.left + paddingSides.right + ratio * chartWidth;
+		const ratio = (x - computedXMin) / (computedXMax - computedXMin);
+		const res = ratio * chartWidth;
 		// Clamp to the drawable area
 		return Math.max(paddingSides.left + paddingSides.right, Math.min(chartWidth, res));
 	};
@@ -162,7 +162,15 @@
 	 */
 	let mouseHoverX = $derived(dataHoverIndex >= 0 ? xScale(dataHoverIndex) : 0);
 
-	let tooltipX = $derived(mouseHoverX + 10);
+	let tooltipX = $derived.by(() => {
+		// Determine when the mouse is hovering so far to the right that there's not enough space to show the tooltip and its width
+		if (mouseHoverX > chartWidth - tooltipWidth - 10) {
+			return mouseHoverX - tooltipWidth;
+		} else {
+			// Mouse is hovering to the left half of the chart, tooltip is shown to the right of the mouse cursor
+			return mouseHoverX + 5;
+		}
+	});
 	let tooltipY = $state(0);
 
 	let isHoveringChart = $state(false);
@@ -207,8 +215,8 @@
 		// Convert from the dimensions of the image to a corresponding data index in the chart
 		const relative = mouseX / chartWidth;
 		const index = Math.round(computedXMin + relative * (computedXMax - computedXMin));
-		tooltipY = event.clientY - rect.top + 10; // 10px below the mouse
-		dataHoverIndex = Math.max(0, Math.min(pointCount - 1, index));
+		tooltipY = event.clientY - rect.top; // 10px below the mouse
+		dataHoverIndex = Math.max(0, Math.min(pointCount, index));
 		isHoveringChart = true;
 	};
 
@@ -225,14 +233,14 @@
 			return [];
 		}
 
-		const barWidth = innerWidth / pointCount;
+		const barWidth = innerWidth / pointCount / 2;
 
 		const groups = Array.from({ length: pointCount }, (_, dataSeriesIndex) => {
 			const xBaseLine = xScale(dataSeriesIndex);
 			return data.map((series, seriesIndex) => {
 				const v = series.values[dataSeriesIndex];
 				const x = xBaseLine + seriesIndex * barWidth - barWidth / 2;
-				const y = Math.abs(yScale(v));
+				const y = yScale(v);
 				const h = innerHeight + (paddingSides.top + paddingSides.bottom) - y;
 				return {
 					x,
@@ -249,10 +257,13 @@
 	 * Creates values for X, taking into account any x culling settings
 	 */
 	const xTicks = $derived.by(() => {
+		// Ensure the culling value isn't larger than max number of data points
+		const xCulling = Math.min(xValueCulling, pointCount - 1);
+
 		const range = computedXMax - computedXMin;
-		const step = Math.max(1, Math.floor(range / xValueCulling));
+		const step = Math.max(1, Math.floor(range / xCulling));
 
-		const indexes = Array.from({ length: xValueCulling + 1 }, (_, i) => computedXMin + i * step);
+		const indexes = Array.from({ length: xCulling + 1 }, (_, i) => computedXMin + i * step);
 
 		// Use a set to ensure unique values
 		const unique = Array.from(new Set(indexes));
@@ -260,12 +271,20 @@
 		return unique.map((index) => {
 			// TODO: Using base index as fallback will cause issues when adding a xValuePadding and using custom xValues
 			const value = xValues?.[index] !== undefined ? xValues[index] : index;
+			let position = xScale(index);
+			let labelPosition = position;
+			if (index === 0) {
+				labelPosition = position + 10;
+			} else if (index === pointCount - 1) {
+				labelPosition = position - 10;
+			}
 			return {
 				value:
 					timeFormatting && value === 0
 						? 'Now'
 						: `${value.toFixed(xValuePrecision)}${xValueSuffix}`,
-				position: xScale(index)
+				position: position,
+				labelPosition: labelPosition
 			};
 		});
 	});
@@ -391,7 +410,7 @@
 		{#if isEnoughDataForPresentation}
 			<!-- Axis labels and grid lines -->
 			<!-- X-axis -->
-			{#each xTicks as { value, position }, index (`x-axis-label-${index}`)}
+			{#each xTicks as { value, position, labelPosition }, index (`x-axis-label-${index}`)}
 				{#if showGraphGrid}
 					<!-- LINES - Vertical -->
 					<line
@@ -405,7 +424,7 @@
 				{/if}
 				<!-- LABELS - X axis -->
 				<text
-					x={position}
+					x={labelPosition}
 					y={innerHeight + verticalPadding + 15}
 					text-anchor="middle"
 					font-size="12"
@@ -421,8 +440,8 @@
 				{#if showGraphGrid}
 					<!-- LINES - Horizontal -->
 					<line
-						x1={showHorizontalGridLines ? chartSafetyMarginX / 2 + 20 : verticalPadding}
-						x2={showHorizontalGridLines ? chartWidth + chartSafetyMarginX : horizontalPadding - 5}
+						x1={showHorizontalGridLines ? chartSafetyMarginX / 2 : verticalPadding}
+						x2={showHorizontalGridLines ? chartWidth : horizontalPadding - 5}
 						y1={y}
 						y2={y}
 						stroke="#ccc"
@@ -504,8 +523,8 @@
 			<line
 				x1={0}
 				x2={chartContainerWidth}
-				y1={tooltipY - 10}
-				y2={tooltipY - 10}
+				y1={tooltipY + 1}
+				y2={tooltipY + 1}
 				stroke="#2B9C6A"
 				stroke-width="1"
 				stroke-dasharray="4 4"
@@ -527,6 +546,7 @@
 	<!-- Tooltip for the graph -->
 	{#if isHoveringChart && dataHoverIndex >= 0}
 		<div
+			bind:clientWidth={tooltipWidth}
 			class="barline-tooltip"
 			style="
       left: {tooltipX}px;
@@ -557,14 +577,14 @@
 			</div>
 		</div>
 	{/if}
-	<div class="d-flex justify-content-center">
+	<div class="export-button-container">
 		<button
 			class="barline-export-chart-button"
 			onclick={() => {
 				exportSvg(svgChartElement);
 			}}
 		>
-			Export graph
+			🖼️ Export
 		</button>
 	</div>
 </div>
@@ -572,22 +592,7 @@
 <style>
 	.barline-chart {
 		font-family: 'Open Sans', 'Lato', 'Helvetica', 'Ubuntu', sans-serif;
-	}
-
-	.barline-export-chart-button {
-		background-color: #222;
-		color: #fff;
-		border: none;
-		padding: 8px 16px;
-		border-radius: 4px;
-		font-size: 14px;
-		cursor: pointer;
-	}
-
-	.barline-export-chart-button:hover {
-		background-color: #3f3f3f;
-		color: #ffac11;
-		transition: all 0.25s ease-in-out;
+		position: relative;
 	}
 
 	.barline-tooltip {
@@ -600,10 +605,6 @@
 		z-index: 500;
 	}
 
-	.barline-chart-title {
-		font-weight: bold;
-	}
-
 	.barline-tooltip-header {
 		/*bg-dark-blue-horizontal-gradient text-white p-2*/
 		background-color: #222;
@@ -621,4 +622,24 @@
 	.barline-tooltip-content dd {
 		margin: 0;
 	}
+
+	.barline-export-chart-button {
+		background-color: #222;
+		color: #fff;
+		border: none;
+		padding: 8px 16px;
+		border-radius: 4px;
+		font-size: 14px;
+		cursor: pointer;
+	}
+
+	.barline-export-chart-button:hover {
+		background-color: #3f3f3f;
+		color: #ffac11;
+		transition: all 0.25s ease-in-out;
+	}
+
+	.barline-chart-title {
+		font-weight: bold;
+	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@coreusa/final-barline",
-	"version": "0.1.0",
+	"version": "0.1.5",
 	"description": "Final Barline - The lightweight, high performance SVG Chart Library",
 	"keywords": [
 		"SVG Chart",