Merge pull request #132 from cmb-sy/add-round-option

Add round option
y-takey · Nov 13, 2024 · 333bd23 · 333bd23
2 parents 06236f6 + 14df6c7
commit 333bd23
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -42,14 +42,15 @@ Chart.register(ChartjsPluginStacked100.default);
 
 ## Options
 
-| Name                | Type    | Default | Description                                                                                                                                 |
-| :------------------ | :------ | :------ | :------------------------------------------------------------------------------------------------------------------------------------------ |
-| enable              | boolean | false   |                                                                                                                                             |
-| replaceTooltipLabel | boolean | true    | replace tooltip label automatically.                                                                                                        |
-| fixNegativeScale    | boolean | true    | when datasets has negative value and `fixNegativeScale` is `false`, the nagative scale is variable. (the range is between `-100` and `-1`)  |
-| individual          | boolean | false   | scale the highest bar to 100%, and the rest would be proportional to the highest bar of a stack.                                            |
-| precision           | number  | 1       | precision of percentage. the range is between `0` and `16`                                                                                  |
-| axisId              | string  | -       | This option allows you to stack only the axis in a chart that includes multiple axes. By default, the plugin will attempt to stack all axes |
+| Name                | Type                          | Default | Description                                                                                                                                 |
+| :------------------ | :---------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------ |
+| enable              | boolean                       | false   |                                                                                                                                             |
+| replaceTooltipLabel | boolean                       | true    | replace tooltip label automatically.                                                                                                        |
+| fixNegativeScale    | boolean                       | true    | when datasets has negative value and `fixNegativeScale` is `false`, the nagative scale is variable. (the range is between `-100` and `-1`)  |
+| individual          | boolean                       | false   | scale the highest bar to 100%, and the rest would be proportional to the highest bar of a stack.                                            |
+| round               | `"off"` \| `"down"` \| `"up"` | `"off"` | Use `"off"` to `Math.round`, `"down"` to `Math.floor`, and `"up"` to `Math.ceil`.                                                           |
+| precision           | number                        | 1       | precision of percentage. the range is between `0` and `16`                                                                                  |
+| axisId              | string                        | -       | This option allows you to stack only the axis in a chart that includes multiple axes. By default, the plugin will attempt to stack all axes |
 
 ## Usage
 

diff --git a/src/plugin.ts b/src/plugin.ts
@@ -7,7 +7,15 @@ import {
   ParsingOptions,
 } from "chart.js";
 
-import { dataValue, setOriginalData, round, getPrecision, isObject } from "./utils";
+import {
+  dataValue,
+  setOriginalData,
+  roundOff,
+  roundDown,
+  roundUp,
+  getPrecision,
+  isObject,
+} from "./utils";
 import { ExtendedChartData, ExtendedPlugin } from "./types";
 
 export const defaultStackKey = Symbol();
@@ -86,11 +94,19 @@ const calculateRate = (
   isHorizontal: boolean,
   precision: number,
   individual: boolean,
+  roundOption: "off" | "down" | "up" = "off",
   targetAxisId?: string,
   parsing?: ParsingOptions["parsing"],
 ) => {
   const totals = summarizeValues(data, visibles, isHorizontal, individual, targetAxisId, parsing);
 
+  const round =
+    roundOption === "off"
+      ? roundOff
+      : roundOption === "down"
+        ? roundDown
+        : roundUp;
+
   return data.datasets.map((dataset) => {
     const isTarget = isTargetDataset(dataset, targetAxisId);
 
@@ -218,6 +234,7 @@ export const beforeUpdate: ExtendedPlugin["beforeUpdate"] = (
     isHorizontalChart(chartInstance),
     precision,
     pluginOptions.individual,
+    pluginOptions.roundOption,
     pluginOptions.axisId,
     chartInstance.options.parsing,
   );

diff --git a/src/test/utils.test.ts b/src/test/utils.test.ts
@@ -1,6 +1,16 @@
-import { round } from "../utils";
+import { roundOff, roundDown, roundUp } from "../utils";
 
-test("round", () => {
-  expect(round(0.123456, 1)).toBe(12.3)
-  expect(round(0.123456, 2)).toBe(12.35)
+test("roundOff", () => {
+  expect(roundOff(0.123456, 1)).toBe(12.3);
+  expect(roundOff(0.123456, 2)).toBe(12.35);
+});
+
+test("roundDown", () => {
+  expect(roundDown(0.123456, 1)).toBe(12.3);
+  expect(roundDown(0.123456, 2)).toBe(12.34);
+});
+
+test("roundUp", () => {
+  expect(roundUp(0.123456, 1)).toBe(12.4);
+  expect(roundUp(0.123456, 2)).toBe(12.35);
 });
diff --git a/src/types.ts b/src/types.ts
@@ -9,6 +9,7 @@ export interface PluginOptions {
   replaceTooltipLabel?: boolean;
   fixNegativeScale?: boolean;
   individual?: boolean;
+  roundOption?: "off" | "down" | "up";
   precision?: number;
   axisId?: string;
 }

diff --git a/src/utils.ts b/src/utils.ts
@@ -33,11 +33,21 @@ export const setOriginalData = (data: ExtendedChartData) => {
   });
 };
 
-export const round = (value: number, precision: number): number => {
+export const roundOff = (value: number, precision: number): number => {
   const multiplicator = Math.pow(10, precision);
   return Math.round(value * 100 * multiplicator) / multiplicator;
 };
 
+export const roundDown = (value: number, precision: number): number => {
+  const multiplicator = Math.pow(10, precision);
+  return Math.floor(value * 100 * multiplicator) / multiplicator;
+};
+
+export const roundUp = (value: number, precision: number): number => {
+  const multiplicator = Math.pow(10, precision);
+  return Math.ceil(value * 100 * multiplicator) / multiplicator;
+};
+
 export const getPrecision = (pluginOptions: PluginOptions): number => {
   // return the (validated) configured precision from pluginOptions or default 1
   const defaultPrecision = 1;