@eleventheye/asui 2.11.1 → 2.11.2

package/dist/aschart/donut/ASChartDonut.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASChartDonut.d.ts","sourceRoot":"","sources":["../../../src/aschart/donut/ASChartDonut.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAUzD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmD7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ASChartDonut.d.ts","sourceRoot":"","sources":["../../../src/aschart/donut/ASChartDonut.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAWzD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyD7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/aschart/donut/ASChartDonut.js

@@ -5,10 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const apptypes_1 = require("../../apptypes");
 const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
 const styles_1 = require("./styles");
-const ASChartDonut = ({ className = '', theme = astheme_1.default, value = 5, style = undefined, size = apptypes_1.ComponentSize.Medium, donutSize = '200px', donutLabel = undefined, }) => {
+const ASChartDonut = ({ className = '', theme = astheme_1.default, value = 5, style = undefined, size = apptypes_1.ComponentSize.Medium, donutSize = '200px', donutLabel = undefined, donutSubLabel = undefined, }) => {
     const thickness = size === apptypes_1.ComponentSize.Medium ? '12' : size === apptypes_1.ComponentSize.Small ? '8' : '16';
     const trackThickness = size === apptypes_1.ComponentSize.Medium ? '6' : size === apptypes_1.ComponentSize.Small ? '3' : '10';
     const percentageValue = 502 - Math.round((value / 100) * 378);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.DonutChart, { className: className, theme: theme, style: style, "$size": donutSize, children: [donutLabel && (0, jsx_runtime_1.jsx)(styles_1.DonutChartText, { theme: theme.chartdonut, children: donutLabel }), (0, jsx_runtime_1.jsxs)(styles_1.DonutChartSvg, { width: "100%", viewBox: "0 0 180 180", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)(styles_1.DonutChartCircleOuterTrack, { theme: theme.chartdonut, d: "M170 90A80 80 0 0090 10 80 80 0 0010 90a80 80 0 0080 80 80 80 0 0080-80Z", strokeWidth: parseInt(thickness, 10) + 2, fill: "none" }), (0, jsx_runtime_1.jsx)(styles_1.DonutChartCircleInnerTrack, { theme: theme.chartdonut, d: "M170 90A80 80 0 0090 10 80 80 0 0010 90a80 80 0 0080 80 80 80 0 0080-80Z", strokeWidth: parseInt(thickness, 10) - 4, fill: "none" }), (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("title", { children: "ASChartDonut" }), (0, jsx_runtime_1.jsx)(styles_1.DonutChartCircle, { "$offset": percentageValue, theme: theme.chartdonut, d: "M170 90A80 80 0 0090 10 80 80 0 0010 90a80 80 0 0080 80 80 80 0 0080-80Z", strokeWidth: thickness, fill: "none" })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.DonutChart, { className: className, theme: theme, style: style, "$size": donutSize, children: [donutLabel && ((0, jsx_runtime_1.jsxs)(styles_1.DonutChartText, { theme: theme.chartdonut, children: [donutLabel, (0, jsx_runtime_1.jsx)(styles_1.DonutChartSubText, { children: donutSubLabel })] })), (0, jsx_runtime_1.jsxs)(styles_1.DonutChartSvg, { width: "100%", viewBox: "0 0 180 180", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)(styles_1.DonutChartCircleOuterTrack, { theme: theme.chartdonut, d: "M170 90A80 80 0 0090 10 80 80 0 0010 90a80 80 0 0080 80 80 80 0 0080-80Z", strokeWidth: parseInt(thickness, 10) + 2, fill: "none" }), (0, jsx_runtime_1.jsx)(styles_1.DonutChartCircleInnerTrack, { theme: theme.chartdonut, d: "M170 90A80 80 0 0090 10 80 80 0 0010 90a80 80 0 0080 80 80 80 0 0080-80Z", strokeWidth: parseInt(thickness, 10), fill: "none" }), (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("title", { children: "ASChartDonut" }), (0, jsx_runtime_1.jsx)(styles_1.DonutChartCircle, { "$offset": percentageValue, theme: theme.chartdonut, d: "M170 90A80 80 0 0090 10 80 80 0 0010 90a80 80 0 0080 80 80 80 0 0080-80Z", strokeWidth: thickness, fill: "none" })] })] })] }));
 };
 exports.default = ASChartDonut;

package/dist/aschart/donut/ASChartDonut.types.d.ts

@@ -8,5 +8,6 @@ export interface ASChartDonutProps {
     size?: ASComponentSize;
     donutSize?: string;
     donutLabel?: React.ReactNode;
+    donutSubLabel?: React.ReactNode;
 }
 //# sourceMappingURL=ASChartDonut.types.d.ts.map

package/dist/aschart/donut/ASChartDonut.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASChartDonut.types.d.ts","sourceRoot":"","sources":["../../../src/aschart/donut/ASChartDonut.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE1D,MAAM,WAAW,iBAAiB;IAMhC,SAAS,CAAC,EAAE,MAAM,CAAC;IAOnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAOhB,KAAK,CAAC,EAAE,aAAa,CAAC;IAQtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAOf,IAAI,CAAC,EAAE,eAAe,CAAC;IAOvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAOnB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B"}
+{"version":3,"file":"ASChartDonut.types.d.ts","sourceRoot":"","sources":["../../../src/aschart/donut/ASChartDonut.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE1D,MAAM,WAAW,iBAAiB;IAMhC,SAAS,CAAC,EAAE,MAAM,CAAC;IAOnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAOhB,KAAK,CAAC,EAAE,aAAa,CAAC;IAQtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAOf,IAAI,CAAC,EAAE,eAAe,CAAC;IAOvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAOnB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAO7B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC"}

package/dist/aschart/donut/styles.d.ts

@@ -8,6 +8,7 @@ export type DonutChartTextStyledProps = {
     theme: ASChartDonutTheme;
 };
 export declare const DonutChartText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, DonutChartTextStyledProps>> & string;
+export declare const DonutChartSubText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, DonutChartTextStyledProps>> & string;
 export declare const DonutChartSvg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, never>> & string;
 export type ASChartDonutCircleProps = {
     theme: ASChartDonutTheme;

package/dist/aschart/donut/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/aschart/donut/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,iBAAiB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,UAAU,4PAMtB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AACF,eAAO,MAAM,cAAc,gQAW1B,CAAC;AAEF,eAAO,MAAM,aAAa,mKAEzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mMAM5B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AACF,eAAO,MAAM,0BAA0B,gMAItC,CAAC;AAEF,eAAO,MAAM,0BAA0B,gMAMtC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/aschart/donut/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,iBAAiB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,UAAU,4PAMtB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AACF,eAAO,MAAM,cAAc,gQAW1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,gQAW7B,CAAC;AAEF,eAAO,MAAM,aAAa,mKAEzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mMAM5B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AACF,eAAO,MAAM,0BAA0B,gMAItC,CAAC;AAEF,eAAO,MAAM,0BAA0B,gMAMtC,CAAC"}

package/dist/aschart/donut/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DonutChartCircleOuterTrack = exports.DonutChartCircleInnerTrack = exports.DonutChartCircle = exports.DonutChartSvg = exports.DonutChartText = exports.DonutChart = void 0;
+exports.DonutChartCircleOuterTrack = exports.DonutChartCircleInnerTrack = exports.DonutChartCircle = exports.DonutChartSvg = exports.DonutChartSubText = exports.DonutChartText = exports.DonutChart = void 0;
 const tslib_1 = require("tslib");
 const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
 exports.DonutChart = styled_components_1.default.div `
@@ -14,7 +14,7 @@ exports.DonutChartText = styled_components_1.default.span `
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -60%);
   display: block;
   white-space: nowrap;
   font-size: ${({ theme }) => theme.chartdonutTextFontSize};
@@ -22,13 +22,25 @@ exports.DonutChartText = styled_components_1.default.span `
   color: ${({ theme }) => theme.chartdonutTextColor};
   text-shadow: ${({ theme }) => theme.chartdonutTextShadow};
 `;
+exports.DonutChartSubText = styled_components_1.default.span `
+  position: absolute;
+  bottom: -24px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-block;
+  white-space: nowrap;
+  font-size: 1.5rem;
+  font-weight: 300;
+  color: ${({ theme }) => theme.chartdonutTextColor};
+  text-shadow: ${({ theme }) => theme.chartdonutTextShadow};
+`;
 exports.DonutChartSvg = styled_components_1.default.svg `
   transform: rotate(-225deg) scaleY(-1);
 `;
 exports.DonutChartCircle = styled_components_1.default.path `
   stroke-dasharray: 502;
   stroke-dashoffset: 502;
-  transition: stroke-dashoffset 4.5s ease-out;
+  transition: stroke-dashoffset 2.5s ease-out 0.5s;
   stroke-dashoffset: ${({ $offset }) => $offset};
   stroke: ${({ theme }) => theme.chartdonutColor};
 `;

package/dist/astheme/ASThemeDefault.js

@@ -173,10 +173,10 @@ const ASThemeDefault = {
     },
     chartdonut: {
         chartdonutColor: colors.yellowAlpha90,
-        chartdonutInnerTrackColor: colors.mainGray99,
-        chartdonutOuterTrackColor: colors.mainGray33,
+        chartdonutInnerTrackColor: colors.mainGray81,
+        chartdonutOuterTrackColor: colors.mainGray99,
         chartdonutTextColor: colors.mainGray55,
-        chartdonutTextFontSize: '5rem',
+        chartdonutTextFontSize: '4rem',
         chartdonutTextFontWeight: '400',
         chartdonutTextFontFamily: "'Big Shoulders Display', 'BigShouldersDisplay', Arial, sans-serif",
         chartdonutTextShadow: '1px 1px 4px #000000',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eleventheye/asui",
-  "version": "2.11.1",
+  "version": "2.11.2",
   "private": false,
   "description": "AS UI React Library by eleventheye (another one!)",
   "keywords": [