@schematichq/schematic-components 0.3.4 → 0.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/schematic-components.cjs.js +100 -113
- package/dist/schematic-components.esm.js +100 -113
- package/package.json +1 -1
|
@@ -8709,7 +8709,7 @@ var EmbedProvider = ({
|
|
|
8709
8709
|
(0, import_react2.useEffect)(() => {
|
|
8710
8710
|
if (accessToken) {
|
|
8711
8711
|
const { headers = {} } = apiConfig ?? {};
|
|
8712
|
-
headers["X-Schematic-Components-Version"] = "0.3.
|
|
8712
|
+
headers["X-Schematic-Components-Version"] = "0.3.5";
|
|
8713
8713
|
headers["X-Schematic-Session-ID"] = sessionIdRef.current;
|
|
8714
8714
|
const config = new Configuration({
|
|
8715
8715
|
...apiConfig,
|
|
@@ -11605,126 +11605,113 @@ var MeteredFeatures = (0, import_react18.forwardRef)(({ className, ...rest }, re
|
|
|
11605
11605
|
const theme = nt();
|
|
11606
11606
|
const { data } = useEmbed();
|
|
11607
11607
|
const isLightBackground = useIsLightBackground();
|
|
11608
|
-
|
|
11609
|
-
(
|
|
11610
|
-
|
|
11611
|
-
|
|
11612
|
-
|
|
11613
|
-
|
|
11614
|
-
|
|
11615
|
-
|
|
11616
|
-
|
|
11617
|
-
|
|
11618
|
-
|
|
11619
|
-
|
|
11620
|
-
|
|
11621
|
-
|
|
11622
|
-
|
|
11623
|
-
|
|
11624
|
-
|
|
11625
|
-
|
|
11626
|
-
|
|
11627
|
-
|
|
11628
|
-
|
|
11629
|
-
|
|
11630
|
-
|
|
11631
|
-
|
|
11632
|
-
|
|
11633
|
-
|
|
11634
|
-
|
|
11635
|
-
|
|
11636
|
-
|
|
11608
|
+
const features = (data.featureUsage?.features || []).filter(({ feature }) => {
|
|
11609
|
+
return (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.id && props.visibleFeatures?.includes(feature.id);
|
|
11610
|
+
});
|
|
11611
|
+
if (features.length === 0) {
|
|
11612
|
+
return null;
|
|
11613
|
+
}
|
|
11614
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Flex, { ref, className, $flexDirection: "column", children: features.map(({ allocation, feature, usage }, index) => {
|
|
11615
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Element, { as: Flex, $gap: "1.5rem", children: [
|
|
11616
|
+
props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11617
|
+
IconRound,
|
|
11618
|
+
{
|
|
11619
|
+
name: feature.icon,
|
|
11620
|
+
size: "sm",
|
|
11621
|
+
colors: [
|
|
11622
|
+
theme.primary,
|
|
11623
|
+
isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
|
|
11624
|
+
]
|
|
11625
|
+
}
|
|
11626
|
+
),
|
|
11627
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: "1", children: [
|
|
11628
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
11629
|
+
Flex,
|
|
11630
|
+
{
|
|
11631
|
+
ref: (el) => el && elements.current.push(el),
|
|
11632
|
+
$flexWrap: "wrap",
|
|
11633
|
+
$gap: "1rem",
|
|
11634
|
+
children: [
|
|
11635
|
+
feature?.name && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: "1", children: [
|
|
11636
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11637
|
+
Text,
|
|
11638
|
+
{
|
|
11639
|
+
as: Box,
|
|
11640
|
+
$font: theme.typography[props.header.fontStyle].fontFamily,
|
|
11641
|
+
$size: theme.typography[props.header.fontStyle].fontSize,
|
|
11642
|
+
$weight: theme.typography[props.header.fontStyle].fontWeight,
|
|
11643
|
+
$color: theme.typography[props.header.fontStyle].color,
|
|
11644
|
+
children: feature.name
|
|
11645
|
+
}
|
|
11646
|
+
),
|
|
11647
|
+
props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11648
|
+
Text,
|
|
11649
|
+
{
|
|
11650
|
+
as: Box,
|
|
11651
|
+
$font: theme.typography[props.description.fontStyle].fontFamily,
|
|
11652
|
+
$size: theme.typography[props.description.fontStyle].fontSize,
|
|
11653
|
+
$weight: theme.typography[props.description.fontStyle].fontWeight,
|
|
11654
|
+
$color: theme.typography[props.description.fontStyle].color,
|
|
11655
|
+
children: feature.description
|
|
11656
|
+
}
|
|
11657
|
+
)
|
|
11658
|
+
] }),
|
|
11659
|
+
(feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
11660
|
+
Box,
|
|
11661
|
+
{
|
|
11662
|
+
$flexBasis: "min-content",
|
|
11663
|
+
$flexGrow: "1",
|
|
11664
|
+
$textAlign: shouldWrapChildren ? "left" : "right",
|
|
11665
|
+
children: [
|
|
11666
|
+
props.usage.isVisible && typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
11637
11667
|
Text,
|
|
11638
11668
|
{
|
|
11639
11669
|
as: Box,
|
|
11640
|
-
$font: theme.typography[props.
|
|
11641
|
-
$size: theme.typography[props.
|
|
11642
|
-
$weight: theme.typography[props.
|
|
11643
|
-
$
|
|
11644
|
-
|
|
11670
|
+
$font: theme.typography[props.usage.fontStyle].fontFamily,
|
|
11671
|
+
$size: theme.typography[props.usage.fontStyle].fontSize,
|
|
11672
|
+
$weight: theme.typography[props.usage.fontStyle].fontWeight,
|
|
11673
|
+
$lineHeight: 1.25,
|
|
11674
|
+
$color: theme.typography[props.usage.fontStyle].color,
|
|
11675
|
+
children: [
|
|
11676
|
+
formatNumber(usage),
|
|
11677
|
+
" ",
|
|
11678
|
+
(0, import_pluralize3.default)(feature.name, usage)
|
|
11679
|
+
]
|
|
11645
11680
|
}
|
|
11646
11681
|
),
|
|
11647
|
-
props.
|
|
11682
|
+
props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11648
11683
|
Text,
|
|
11649
11684
|
{
|
|
11650
|
-
|
|
11651
|
-
$
|
|
11652
|
-
$
|
|
11653
|
-
$
|
|
11654
|
-
$
|
|
11655
|
-
children: feature.description
|
|
11685
|
+
$font: theme.typography[props.allocation.fontStyle].fontFamily,
|
|
11686
|
+
$size: theme.typography[props.allocation.fontStyle].fontSize,
|
|
11687
|
+
$weight: theme.typography[props.allocation.fontStyle].fontWeight,
|
|
11688
|
+
$color: theme.typography[props.allocation.fontStyle].color,
|
|
11689
|
+
children: typeof allocation === "number" ? `Limit of ${formatNumber(allocation)}` : "No limit"
|
|
11656
11690
|
}
|
|
11657
|
-
)
|
|
11658
|
-
]
|
|
11659
|
-
|
|
11660
|
-
|
|
11661
|
-
|
|
11662
|
-
|
|
11663
|
-
|
|
11664
|
-
|
|
11665
|
-
|
|
11666
|
-
|
|
11667
|
-
|
|
11668
|
-
|
|
11669
|
-
|
|
11670
|
-
|
|
11671
|
-
|
|
11672
|
-
|
|
11673
|
-
|
|
11674
|
-
|
|
11675
|
-
|
|
11676
|
-
|
|
11677
|
-
|
|
11678
|
-
|
|
11679
|
-
|
|
11680
|
-
|
|
11681
|
-
),
|
|
11682
|
-
props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11683
|
-
Text,
|
|
11684
|
-
{
|
|
11685
|
-
$font: theme.typography[props.allocation.fontStyle].fontFamily,
|
|
11686
|
-
$size: theme.typography[props.allocation.fontStyle].fontSize,
|
|
11687
|
-
$weight: theme.typography[props.allocation.fontStyle].fontWeight,
|
|
11688
|
-
$color: theme.typography[props.allocation.fontStyle].color,
|
|
11689
|
-
children: typeof allocation === "number" ? `Limit of ${formatNumber(allocation)}` : "No limit"
|
|
11690
|
-
}
|
|
11691
|
-
) })
|
|
11692
|
-
]
|
|
11693
|
-
}
|
|
11694
|
-
)
|
|
11695
|
-
]
|
|
11696
|
-
}
|
|
11697
|
-
),
|
|
11698
|
-
props.isVisible && typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11699
|
-
ProgressBar,
|
|
11700
|
-
{
|
|
11701
|
-
progress: usage / allocation * 100,
|
|
11702
|
-
value: usage,
|
|
11703
|
-
total: allocation,
|
|
11704
|
-
color: [
|
|
11705
|
-
"blue",
|
|
11706
|
-
"blue",
|
|
11707
|
-
"yellow",
|
|
11708
|
-
"red"
|
|
11709
|
-
][Math.floor(usage / allocation * 4)]
|
|
11710
|
-
}
|
|
11711
|
-
) })
|
|
11712
|
-
] })
|
|
11713
|
-
] }, index)
|
|
11714
|
-
];
|
|
11715
|
-
},
|
|
11716
|
-
[]
|
|
11717
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Element, { as: Flex, $justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11718
|
-
Text,
|
|
11719
|
-
{
|
|
11720
|
-
$font: theme.typography.heading1.fontFamily,
|
|
11721
|
-
$size: theme.typography.heading1.fontSize,
|
|
11722
|
-
$weight: theme.typography.heading1.fontWeight,
|
|
11723
|
-
$color: theme.typography.heading1.color,
|
|
11724
|
-
$align: "center",
|
|
11725
|
-
children: "No features selected"
|
|
11726
|
-
}
|
|
11727
|
-
) }) });
|
|
11691
|
+
) })
|
|
11692
|
+
]
|
|
11693
|
+
}
|
|
11694
|
+
)
|
|
11695
|
+
]
|
|
11696
|
+
}
|
|
11697
|
+
),
|
|
11698
|
+
props.isVisible && typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11699
|
+
ProgressBar,
|
|
11700
|
+
{
|
|
11701
|
+
progress: usage / allocation * 100,
|
|
11702
|
+
value: usage,
|
|
11703
|
+
total: allocation,
|
|
11704
|
+
color: [
|
|
11705
|
+
"blue",
|
|
11706
|
+
"blue",
|
|
11707
|
+
"yellow",
|
|
11708
|
+
"red"
|
|
11709
|
+
][Math.floor(usage / allocation * 4)]
|
|
11710
|
+
}
|
|
11711
|
+
) })
|
|
11712
|
+
] })
|
|
11713
|
+
] }, index);
|
|
11714
|
+
}) });
|
|
11728
11715
|
});
|
|
11729
11716
|
MeteredFeatures.displayName = "MeteredFeatures";
|
|
11730
11717
|
|
|
@@ -8673,7 +8673,7 @@ var EmbedProvider = ({
|
|
|
8673
8673
|
useEffect(() => {
|
|
8674
8674
|
if (accessToken) {
|
|
8675
8675
|
const { headers = {} } = apiConfig ?? {};
|
|
8676
|
-
headers["X-Schematic-Components-Version"] = "0.3.
|
|
8676
|
+
headers["X-Schematic-Components-Version"] = "0.3.5";
|
|
8677
8677
|
headers["X-Schematic-Session-ID"] = sessionIdRef.current;
|
|
8678
8678
|
const config = new Configuration({
|
|
8679
8679
|
...apiConfig,
|
|
@@ -11569,126 +11569,113 @@ var MeteredFeatures = forwardRef8(({ className, ...rest }, ref) => {
|
|
|
11569
11569
|
const theme = nt();
|
|
11570
11570
|
const { data } = useEmbed();
|
|
11571
11571
|
const isLightBackground = useIsLightBackground();
|
|
11572
|
-
|
|
11573
|
-
(
|
|
11574
|
-
|
|
11575
|
-
|
|
11576
|
-
|
|
11577
|
-
|
|
11578
|
-
|
|
11579
|
-
|
|
11580
|
-
|
|
11581
|
-
|
|
11582
|
-
|
|
11583
|
-
|
|
11584
|
-
|
|
11585
|
-
|
|
11586
|
-
|
|
11587
|
-
|
|
11588
|
-
|
|
11589
|
-
|
|
11590
|
-
|
|
11591
|
-
|
|
11592
|
-
|
|
11593
|
-
|
|
11594
|
-
|
|
11595
|
-
|
|
11596
|
-
|
|
11597
|
-
|
|
11598
|
-
|
|
11599
|
-
|
|
11600
|
-
|
|
11572
|
+
const features = (data.featureUsage?.features || []).filter(({ feature }) => {
|
|
11573
|
+
return (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.id && props.visibleFeatures?.includes(feature.id);
|
|
11574
|
+
});
|
|
11575
|
+
if (features.length === 0) {
|
|
11576
|
+
return null;
|
|
11577
|
+
}
|
|
11578
|
+
return /* @__PURE__ */ jsx19(Flex, { ref, className, $flexDirection: "column", children: features.map(({ allocation, feature, usage }, index) => {
|
|
11579
|
+
return /* @__PURE__ */ jsxs12(Element, { as: Flex, $gap: "1.5rem", children: [
|
|
11580
|
+
props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx19(
|
|
11581
|
+
IconRound,
|
|
11582
|
+
{
|
|
11583
|
+
name: feature.icon,
|
|
11584
|
+
size: "sm",
|
|
11585
|
+
colors: [
|
|
11586
|
+
theme.primary,
|
|
11587
|
+
isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
|
|
11588
|
+
]
|
|
11589
|
+
}
|
|
11590
|
+
),
|
|
11591
|
+
/* @__PURE__ */ jsxs12(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: "1", children: [
|
|
11592
|
+
/* @__PURE__ */ jsxs12(
|
|
11593
|
+
Flex,
|
|
11594
|
+
{
|
|
11595
|
+
ref: (el) => el && elements.current.push(el),
|
|
11596
|
+
$flexWrap: "wrap",
|
|
11597
|
+
$gap: "1rem",
|
|
11598
|
+
children: [
|
|
11599
|
+
feature?.name && /* @__PURE__ */ jsxs12(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: "1", children: [
|
|
11600
|
+
/* @__PURE__ */ jsx19(
|
|
11601
|
+
Text,
|
|
11602
|
+
{
|
|
11603
|
+
as: Box,
|
|
11604
|
+
$font: theme.typography[props.header.fontStyle].fontFamily,
|
|
11605
|
+
$size: theme.typography[props.header.fontStyle].fontSize,
|
|
11606
|
+
$weight: theme.typography[props.header.fontStyle].fontWeight,
|
|
11607
|
+
$color: theme.typography[props.header.fontStyle].color,
|
|
11608
|
+
children: feature.name
|
|
11609
|
+
}
|
|
11610
|
+
),
|
|
11611
|
+
props.description.isVisible && /* @__PURE__ */ jsx19(
|
|
11612
|
+
Text,
|
|
11613
|
+
{
|
|
11614
|
+
as: Box,
|
|
11615
|
+
$font: theme.typography[props.description.fontStyle].fontFamily,
|
|
11616
|
+
$size: theme.typography[props.description.fontStyle].fontSize,
|
|
11617
|
+
$weight: theme.typography[props.description.fontStyle].fontWeight,
|
|
11618
|
+
$color: theme.typography[props.description.fontStyle].color,
|
|
11619
|
+
children: feature.description
|
|
11620
|
+
}
|
|
11621
|
+
)
|
|
11622
|
+
] }),
|
|
11623
|
+
(feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ jsxs12(
|
|
11624
|
+
Box,
|
|
11625
|
+
{
|
|
11626
|
+
$flexBasis: "min-content",
|
|
11627
|
+
$flexGrow: "1",
|
|
11628
|
+
$textAlign: shouldWrapChildren ? "left" : "right",
|
|
11629
|
+
children: [
|
|
11630
|
+
props.usage.isVisible && typeof usage === "number" && /* @__PURE__ */ jsxs12(
|
|
11601
11631
|
Text,
|
|
11602
11632
|
{
|
|
11603
11633
|
as: Box,
|
|
11604
|
-
$font: theme.typography[props.
|
|
11605
|
-
$size: theme.typography[props.
|
|
11606
|
-
$weight: theme.typography[props.
|
|
11607
|
-
$
|
|
11608
|
-
|
|
11634
|
+
$font: theme.typography[props.usage.fontStyle].fontFamily,
|
|
11635
|
+
$size: theme.typography[props.usage.fontStyle].fontSize,
|
|
11636
|
+
$weight: theme.typography[props.usage.fontStyle].fontWeight,
|
|
11637
|
+
$lineHeight: 1.25,
|
|
11638
|
+
$color: theme.typography[props.usage.fontStyle].color,
|
|
11639
|
+
children: [
|
|
11640
|
+
formatNumber(usage),
|
|
11641
|
+
" ",
|
|
11642
|
+
(0, import_pluralize3.default)(feature.name, usage)
|
|
11643
|
+
]
|
|
11609
11644
|
}
|
|
11610
11645
|
),
|
|
11611
|
-
props.
|
|
11646
|
+
props.allocation.isVisible && /* @__PURE__ */ jsx19(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx19(
|
|
11612
11647
|
Text,
|
|
11613
11648
|
{
|
|
11614
|
-
|
|
11615
|
-
$
|
|
11616
|
-
$
|
|
11617
|
-
$
|
|
11618
|
-
$
|
|
11619
|
-
children: feature.description
|
|
11649
|
+
$font: theme.typography[props.allocation.fontStyle].fontFamily,
|
|
11650
|
+
$size: theme.typography[props.allocation.fontStyle].fontSize,
|
|
11651
|
+
$weight: theme.typography[props.allocation.fontStyle].fontWeight,
|
|
11652
|
+
$color: theme.typography[props.allocation.fontStyle].color,
|
|
11653
|
+
children: typeof allocation === "number" ? `Limit of ${formatNumber(allocation)}` : "No limit"
|
|
11620
11654
|
}
|
|
11621
|
-
)
|
|
11622
|
-
]
|
|
11623
|
-
|
|
11624
|
-
|
|
11625
|
-
|
|
11626
|
-
|
|
11627
|
-
|
|
11628
|
-
|
|
11629
|
-
|
|
11630
|
-
|
|
11631
|
-
|
|
11632
|
-
|
|
11633
|
-
|
|
11634
|
-
|
|
11635
|
-
|
|
11636
|
-
|
|
11637
|
-
|
|
11638
|
-
|
|
11639
|
-
|
|
11640
|
-
|
|
11641
|
-
|
|
11642
|
-
|
|
11643
|
-
|
|
11644
|
-
|
|
11645
|
-
),
|
|
11646
|
-
props.allocation.isVisible && /* @__PURE__ */ jsx19(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx19(
|
|
11647
|
-
Text,
|
|
11648
|
-
{
|
|
11649
|
-
$font: theme.typography[props.allocation.fontStyle].fontFamily,
|
|
11650
|
-
$size: theme.typography[props.allocation.fontStyle].fontSize,
|
|
11651
|
-
$weight: theme.typography[props.allocation.fontStyle].fontWeight,
|
|
11652
|
-
$color: theme.typography[props.allocation.fontStyle].color,
|
|
11653
|
-
children: typeof allocation === "number" ? `Limit of ${formatNumber(allocation)}` : "No limit"
|
|
11654
|
-
}
|
|
11655
|
-
) })
|
|
11656
|
-
]
|
|
11657
|
-
}
|
|
11658
|
-
)
|
|
11659
|
-
]
|
|
11660
|
-
}
|
|
11661
|
-
),
|
|
11662
|
-
props.isVisible && typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ jsx19(Box, { children: /* @__PURE__ */ jsx19(
|
|
11663
|
-
ProgressBar,
|
|
11664
|
-
{
|
|
11665
|
-
progress: usage / allocation * 100,
|
|
11666
|
-
value: usage,
|
|
11667
|
-
total: allocation,
|
|
11668
|
-
color: [
|
|
11669
|
-
"blue",
|
|
11670
|
-
"blue",
|
|
11671
|
-
"yellow",
|
|
11672
|
-
"red"
|
|
11673
|
-
][Math.floor(usage / allocation * 4)]
|
|
11674
|
-
}
|
|
11675
|
-
) })
|
|
11676
|
-
] })
|
|
11677
|
-
] }, index)
|
|
11678
|
-
];
|
|
11679
|
-
},
|
|
11680
|
-
[]
|
|
11681
|
-
) : /* @__PURE__ */ jsx19(Element, { as: Flex, $justifyContent: "center", children: /* @__PURE__ */ jsx19(
|
|
11682
|
-
Text,
|
|
11683
|
-
{
|
|
11684
|
-
$font: theme.typography.heading1.fontFamily,
|
|
11685
|
-
$size: theme.typography.heading1.fontSize,
|
|
11686
|
-
$weight: theme.typography.heading1.fontWeight,
|
|
11687
|
-
$color: theme.typography.heading1.color,
|
|
11688
|
-
$align: "center",
|
|
11689
|
-
children: "No features selected"
|
|
11690
|
-
}
|
|
11691
|
-
) }) });
|
|
11655
|
+
) })
|
|
11656
|
+
]
|
|
11657
|
+
}
|
|
11658
|
+
)
|
|
11659
|
+
]
|
|
11660
|
+
}
|
|
11661
|
+
),
|
|
11662
|
+
props.isVisible && typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ jsx19(Box, { children: /* @__PURE__ */ jsx19(
|
|
11663
|
+
ProgressBar,
|
|
11664
|
+
{
|
|
11665
|
+
progress: usage / allocation * 100,
|
|
11666
|
+
value: usage,
|
|
11667
|
+
total: allocation,
|
|
11668
|
+
color: [
|
|
11669
|
+
"blue",
|
|
11670
|
+
"blue",
|
|
11671
|
+
"yellow",
|
|
11672
|
+
"red"
|
|
11673
|
+
][Math.floor(usage / allocation * 4)]
|
|
11674
|
+
}
|
|
11675
|
+
) })
|
|
11676
|
+
] })
|
|
11677
|
+
] }, index);
|
|
11678
|
+
}) });
|
|
11692
11679
|
});
|
|
11693
11680
|
MeteredFeatures.displayName = "MeteredFeatures";
|
|
11694
11681
|
|