origam 2.5.0 → 2.6.2

package/dist/src/components/Chart/OrigamChartHeatmap.vue

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-heatmap"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-heatmap"
@@ -218,13 +218,14 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
 } from "vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useDimension,
   useElevation,
@@ -286,7 +287,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);
@@ -295,6 +298,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const AXIS_LEFT = 48;
 const AXIS_BOTTOM = 28;
 const LEGEND_H = 14;

package/dist/src/components/Chart/OrigamChartHoneycomb.vue

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-honeycomb"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-honeycomb"
@@ -140,7 +140,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
@@ -148,6 +148,7 @@ import {
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useDimension,
   useElevation,
@@ -208,7 +209,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);
@@ -217,6 +220,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginStyles } = useMargin(props);
 const { paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const DEFAULT_PALETTE = [
   "primary",
   "success",

package/dist/src/components/Chart/OrigamChartLegend.vue

@@ -2,7 +2,6 @@
 	<ul
 			class="origam-chart__legend"
 			:class="legendClasses"
-			role="list"
 			data-cy="origam-chart-legend"
 	>
 		<li
@@ -34,7 +33,7 @@
 	</ul>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed } from "vue";
 defineOptions({
   name: "OrigamChartLegend"

package/dist/src/components/Chart/OrigamChartMap.vue

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-map"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-map"
@@ -197,13 +197,14 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
 } from "vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useDimension,
   useElevation,
@@ -267,7 +268,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);
@@ -276,6 +279,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginStyles } = useMargin(props);
 const { paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_WIDTH = 1e3;
 const SVG_HEIGHT = 500;
 const LEGEND_H = 14;

package/dist/src/components/Chart/OrigamChartPareto.vue

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-pareto"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-pareto"
@@ -292,7 +292,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
@@ -300,6 +300,7 @@ import {
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useDimension,
   useElevation,
@@ -362,7 +363,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);
@@ -371,6 +374,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginStyles } = useMargin(props);
 const { paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_WIDTH = 640;
 const SVG_HEIGHT = 400;
 const TICK_SIZE = 4;

package/dist/src/components/Chart/OrigamChartPictorial.vue

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-pictorial"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-pictorial"
@@ -59,8 +59,8 @@
 
 					<clipPath
 							v-for="col in fillModeColumns"
-							:key="`clip-${ col.seriesIndex }-${ col.dataIndex }`"
 							:id="`origam-chart-pictorial-clip-${ col.seriesIndex }-${ col.dataIndex }`"
+							:key="`clip-${ col.seriesIndex }-${ col.dataIndex }`"
 					>
 						<rect
 								:x="fillColX(col)"
@@ -288,7 +288,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
@@ -296,6 +296,7 @@ import {
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useDimension,
   useElevation,
@@ -359,7 +360,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);
@@ -368,6 +371,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_WIDTH = 600;
 const SVG_HEIGHT = 400;
 const ICON_GAP = 2;
@@ -485,7 +489,6 @@ const iconSize = computed(() => {
 const columns = computed(() => {
   if (!props.series?.length || categoryCount.value === 0) return [];
   const result = [];
-  const totalCols = categoryCount.value * seriesCount.value;
   const colW = columnWidth.value;
   const iSize = iconSize.value;
   for (let catIdx = 0; catIdx < categoryCount.value; catIdx++) {
@@ -629,7 +632,7 @@ const labelX = (col) => {
   }
   return columnWidth.value / 2;
 };
-const labelY = (col) => {
+const labelY = (_col) => {
   if (props.direction === "horizontal") {
     return columnWidth.value / 2;
   }

package/dist/src/components/Chart/OrigamChartPolar.vue

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-polar"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-polar"
@@ -34,13 +34,15 @@
 				aria-label="Drilldown navigation"
 				data-cy="origam-chart-polar-breadcrumb"
 		>
-			<button
+			<origam-btn
 					class="origam-chart-polar__breadcrumb-back"
-					type="button"
+					variant="outlined"
+					:text="drilldownBackLabel"
 					:aria-label="drilldownBackLabel"
+					:style="{ '--origam-btn---min-height': '0', '--origam-btn---min-width': '0' }"
 					data-cy="origam-chart-polar-breadcrumb-back"
 					@click="onDrillUp"
-			>{{ drilldownBackLabel }}</button>
+			/>
 			<ol class="origam-chart-polar__breadcrumb-trail">
 				<li
 						v-for="item in breadcrumbItems"
@@ -158,12 +160,13 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
 } from "vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useChart,
   useDimension,
@@ -172,6 +175,7 @@ import {
   usePadding,
   useRounded
 } from "../../composables";
+import { OrigamBtn } from "../Btn";
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
 defineOptions({
@@ -223,7 +227,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["drill", "drill-up", "point-click", "legend-click", "series-toggle"]);
 const drillStack = ref([]);
@@ -281,6 +287,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_WIDTH = 600;
 const SVG_HEIGHT = 360;
 const PADDING_POLAR = { top: 12, right: 12, bottom: 12, left: 12 };

package/dist/src/components/Chart/OrigamChartPolarBar.vue

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-polar-bar"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-polar-bar"
@@ -153,7 +153,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
@@ -161,6 +161,7 @@ import {
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useDimension,
   useElevation,
@@ -221,7 +222,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);
@@ -230,6 +233,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_SIZE = 400;
 const CENTER = SVG_SIZE / 2;
 const LABEL_RADIAL_OFFSET = 14;

package/dist/src/components/Chart/OrigamChartPyramid.vue

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-pyramid"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-pyramid"
@@ -152,7 +152,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
@@ -160,6 +160,7 @@ import {
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useDimension,
   useElevation,
@@ -217,7 +218,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);
@@ -226,6 +229,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginStyles } = useMargin(props);
 const { paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_WIDTH = 600;
 const SVG_HEIGHT = 400;
 const PADDING = { top: 20, right: 120, bottom: 20, left: 20 };

package/dist/src/components/Chart/OrigamChartRadar.vue

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-radar"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-radar"
@@ -98,8 +98,6 @@
 								:cy="path.circle!.cy"
 								:r="path.circle!.r"
 								:fill="path.color"
-								tabindex="0"
-								role="button"
 								:aria-label="pointAriaLabel(path)"
 								:data-cy="`origam-chart-point-${ path.seriesIndex }-${ path.dataIndex }`"
 						/>
@@ -138,12 +136,13 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
 } from "vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useChart,
   useDimension,
@@ -197,7 +196,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);
@@ -206,6 +207,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_WIDTH = 600;
 const SVG_HEIGHT = 360;
 const PADDING_RADAR = { top: 20, right: 20, bottom: 20, left: 20 };

package/dist/src/components/Chart/OrigamChartRangeSelector.vue

@@ -6,7 +6,6 @@
 	>
 		<ul
 				class="origam-chart-range-selector__list"
-				role="list"
 		>
 			<li
 					v-for="(btn, i) in buttons"
@@ -26,14 +25,14 @@
 	</nav>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 defineOptions({
   name: "OrigamChartRangeSelector"
 });
 const props = defineProps({
   buttons: { type: Array, required: true },
-  activeIndex: { type: Number, required: true, default: -1 },
-  dataLength: { type: Number, required: true, default: 0 }
+  activeIndex: { type: Number, required: false, default: -1 },
+  dataLength: { type: Number, required: false, default: 0 }
 });
 const emit = defineEmits(["select"]);
 const onButtonClick = (index) => {

package/dist/src/components/Chart/OrigamChartSankey.vue

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-sankey"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-sankey"
@@ -165,7 +165,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
@@ -173,6 +173,7 @@ import {
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useDimension,
   useElevation,
@@ -231,7 +232,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);
@@ -240,6 +243,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginStyles } = useMargin(props);
 const { paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_WIDTH = 600;
 const SVG_HEIGHT = 400;
 const PADDING = { top: 20, right: 100, bottom: 20, left: 100 };

package/dist/src/components/Chart/OrigamChartSparkline.vue

@@ -131,7 +131,7 @@
 	</figure>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
@@ -193,9 +193,11 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
-const emit = defineEmits(["point-click"]);
+defineEmits(["point-click"]);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginStyles } = useMargin(props);

package/dist/src/components/Chart/OrigamChartStreamgraph.vue

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-streamgraph"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-streamgraph"
@@ -176,7 +176,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
@@ -184,6 +184,7 @@ import {
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useDimension,
   useElevation,
@@ -242,7 +243,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);
@@ -251,6 +254,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_WIDTH = 700;
 const SVG_HEIGHT = 420;
 const PADDING = { top: 24, right: 24, bottom: 40, left: 40 };
@@ -342,7 +346,7 @@ const computeOffsets = computed(() => {
   offsets[0] = -totals[0] / 2;
   for (let i = 1; i < n; i++) {
     let g = 0;
-    let nTotal = totals[i] + totals[i - 1];
+    const nTotal = totals[i] + totals[i - 1];
     for (let j = 0; j < L; j++) {
       let cumBefore = 0;
       for (let k = 0; k < j; k++) {
@@ -526,7 +530,7 @@ const svgAriaLabel = computed(() => props.title ?? "streamgraph chart");
 const svgTitle = computed(() => props.title ?? "streamgraph chart");
 const svgDesc = computed(() => {
   const n = visibleRibbons.value.length;
-  return `Streamgraph with ${n} ${n === 1 ? "series" : "series"} and ${columnCount.value} time points.`;
+  return `Streamgraph with ${n} series and ${columnCount.value} time points.`;
 });
 const ribbonAriaLabel = (ribbon) => `${ribbon.name}: ${ribbon.values.map((v) => formatValue(v)).join(", ")}`;
 const svgRef = ref(null);

package/dist/src/components/Chart/OrigamChartSunburst.vue

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-sunburst"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-sunburst"
@@ -161,7 +161,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
@@ -169,6 +169,7 @@ import {
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useDimension,
   useElevation,
@@ -224,7 +225,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);
@@ -233,6 +236,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_SIZE = 400;
 const CENTER = SVG_SIZE / 2;
 const MAX_DEPTH_CAP = 4;