oolib 2.213.5 → 2.214.0
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/index.d.ts +0 -6
- package/dist/index.js +2 -14
- package/dist/stories/v2/components/Accordion.stories.js +0 -1
- package/package.json +1 -1
- package/dist/stories/v2/components/DataVizAccordion.stories.d.ts +0 -7
- package/dist/stories/v2/components/DataVizAccordion.stories.js +0 -141
- package/dist/stories/v2/components/visualization/BarChart.stories.d.ts +0 -23
- package/dist/stories/v2/components/visualization/BarChart.stories.js +0 -251
- package/dist/stories/v2/components/visualization/BarGraphCollection.stories.d.ts +0 -19
- package/dist/stories/v2/components/visualization/BarGraphCollection.stories.js +0 -1190
- package/dist/stories/v2/components/visualization/HeatMapGrid.stories.d.ts +0 -18
- package/dist/stories/v2/components/visualization/HeatMapGrid.stories.js +0 -204
- package/dist/stories/v2/components/visualization/PieChart.stories.d.ts +0 -7
- package/dist/stories/v2/components/visualization/PieChart.stories.js +0 -79
- package/dist/stories/v2/components/visualization/configs/props1.d.ts +0 -102
- package/dist/stories/v2/components/visualization/configs/props1.js +0 -70
- package/dist/stories/v2/components/visualization/configs/props2.d.ts +0 -45
- package/dist/stories/v2/components/visualization/configs/props2.js +0 -2962
- package/dist/stories/v2/components/visualization/vizPlayground.stories.d.ts +0 -7
- package/dist/stories/v2/components/visualization/vizPlayground.stories.js +0 -55
- package/dist/v2/components/DataVizAccordion/index.d.ts +0 -13
- package/dist/v2/components/DataVizAccordion/index.js +0 -60
- package/dist/v2/components/dataviz/BarChart/_base_barchart_ui_configs.d.ts +0 -19
- package/dist/v2/components/dataviz/BarChart/_base_barchart_ui_configs.js +0 -25
- package/dist/v2/components/dataviz/BarChart/comps/CustomTooltip/OptimizedTooltip.d.ts +0 -8
- package/dist/v2/components/dataviz/BarChart/comps/CustomTooltip/OptimizedTooltip.js +0 -118
- package/dist/v2/components/dataviz/BarChart/comps/CustomTooltip/index.d.ts +0 -15
- package/dist/v2/components/dataviz/BarChart/comps/CustomTooltip/index.js +0 -120
- package/dist/v2/components/dataviz/BarChart/comps/CustomizedLabel/index.d.ts +0 -29
- package/dist/v2/components/dataviz/BarChart/comps/CustomizedLabel/index.js +0 -73
- package/dist/v2/components/dataviz/BarChart/comps/Legend/index.d.ts +0 -12
- package/dist/v2/components/dataviz/BarChart/comps/Legend/index.js +0 -35
- package/dist/v2/components/dataviz/BarChart/comps/LegendTooltipGlyph/index.d.ts +0 -7
- package/dist/v2/components/dataviz/BarChart/comps/LegendTooltipGlyph/index.js +0 -18
- package/dist/v2/components/dataviz/BarChart/comps/TruncatedSVGText/index.d.ts +0 -7
- package/dist/v2/components/dataviz/BarChart/comps/TruncatedSVGText/index.js +0 -66
- package/dist/v2/components/dataviz/BarChart/index.d.ts +0 -45
- package/dist/v2/components/dataviz/BarChart/index.js +0 -383
- package/dist/v2/components/dataviz/BarGraphCollection/index.d.ts +0 -24
- package/dist/v2/components/dataviz/BarGraphCollection/index.js +0 -162
- package/dist/v2/components/dataviz/BarGraphCollection/styled.d.ts +0 -9
- package/dist/v2/components/dataviz/BarGraphCollection/styled.js +0 -92
- package/dist/v2/components/dataviz/BarGraphCollection/utils/useGetDimensions.d.ts +0 -2
- package/dist/v2/components/dataviz/BarGraphCollection/utils/useGetDimensions.js +0 -60
- package/dist/v2/components/dataviz/BarGraphCollection/utils/usePrepareData.d.ts +0 -11
- package/dist/v2/components/dataviz/BarGraphCollection/utils/usePrepareData.js +0 -76
- package/dist/v2/components/dataviz/HeatMapGrid/index.d.ts +0 -19
- package/dist/v2/components/dataviz/HeatMapGrid/index.js +0 -232
- package/dist/v2/components/dataviz/HeatMapGrid/utils/mapValueToColor.d.ts +0 -20
- package/dist/v2/components/dataviz/HeatMapGrid/utils/mapValueToColor.js +0 -45
- package/dist/v2/components/dataviz/HeatMapGrid/utils/useAxisMeasure.d.ts +0 -6
- package/dist/v2/components/dataviz/HeatMapGrid/utils/useAxisMeasure.js +0 -53
- package/dist/v2/components/dataviz/HeatMapGrid/utils/useFader.d.ts +0 -6
- package/dist/v2/components/dataviz/HeatMapGrid/utils/useFader.js +0 -36
- package/dist/v2/components/dataviz/HeatMapGrid/utils/usePrepareHeatMapData.d.ts +0 -33
- package/dist/v2/components/dataviz/HeatMapGrid/utils/usePrepareHeatMapData.js +0 -122
- package/dist/v2/components/dataviz/PieChart/index.d.ts +0 -21
- package/dist/v2/components/dataviz/PieChart/index.js +0 -186
- package/dist/v2/components/dataviz/types.d.ts +0 -13
- package/dist/v2/components/dataviz/types.js +0 -2
- package/dist/v2/components/dataviz/utils/usePrepareData.d.ts +0 -21
- package/dist/v2/components/dataviz/utils/usePrepareData.js +0 -213
package/dist/index.d.ts
CHANGED
|
@@ -68,11 +68,6 @@ export { TabBarStyle1 as TabBarV2 } from "./v2/components/TabBar";
|
|
|
68
68
|
export { default as MetaBlockV2 } from "./v2/components/MetaBlock";
|
|
69
69
|
export { DateRangePicker as DateRangePickerV2 } from "./v2/components/DateRangePicker";
|
|
70
70
|
export { HomeCover as HomeCoverV2 } from "./v2/components/HomeCover";
|
|
71
|
-
export { BarChart } from "./v2/components/dataviz/BarChart";
|
|
72
|
-
export { PieChart } from "./v2/components/dataviz/PieChart";
|
|
73
|
-
export { HeatMapGrid } from "./v2/components/dataviz/HeatMapGrid";
|
|
74
|
-
export { BarGraphCollection } from "./v2/components/dataviz/BarGraphCollection";
|
|
75
|
-
export { DataVizAccordion } from "./v2/components/DataVizAccordion";
|
|
76
71
|
export { Accordion as AccordionV2 } from "./v2/components/Accordion";
|
|
77
72
|
export { CheckboxList } from "./v2/components/RadioAndCheckbox/comps/CheckboxList";
|
|
78
73
|
export { CheckboxInput } from "./v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput";
|
|
@@ -80,7 +75,6 @@ export { CheckboxButton } from "./v2/components/RadioAndCheckbox/comps/CheckboxL
|
|
|
80
75
|
export { RadioList } from "./v2/components/RadioAndCheckbox/comps/RadioList/index";
|
|
81
76
|
export { List } from "./v2/components/List";
|
|
82
77
|
export { ListItem } from "./v2/components/List/comps/ListItem";
|
|
83
|
-
export { default as CustomTooltip } from "./v2/components/dataviz/BarChart/comps/CustomTooltip";
|
|
84
78
|
export * as baseStyling from "./v2/themes/utils/baseStyling";
|
|
85
79
|
export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
|
|
86
80
|
export { TagClear, TagLink, TagSelect, TagDisplay } from "./components/Tags";
|
package/dist/index.js
CHANGED
|
@@ -40,8 +40,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
40
40
|
};
|
|
41
41
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
42
42
|
exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
|
|
43
|
-
exports.
|
|
44
|
-
exports.baseStyling =
|
|
43
|
+
exports.ListItem = exports.List = exports.SwitchDouble = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.AccordionV2 = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.typoV2_CSS = exports.colors2 = exports.TabBarV2 = exports.ButtonUpload = exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.generateOptions = exports.genTagComp = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.HintsProvider = exports.BlockLabel = exports.ListContent = exports.CardContent = exports.URLInput = exports.PasswordInput = exports.PhoneInput = exports.NumberInput = exports.EmailInput = exports.TextInput = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = void 0;
|
|
44
|
+
exports.baseStyling = void 0;
|
|
45
45
|
//css and styling related ( styled-components )
|
|
46
46
|
var globalStyles_1 = require("./globalStyles");
|
|
47
47
|
Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
|
|
@@ -226,16 +226,6 @@ Object.defineProperty(exports, "DateRangePickerV2", { enumerable: true, get: fun
|
|
|
226
226
|
var HomeCover_2 = require("./v2/components/HomeCover");
|
|
227
227
|
Object.defineProperty(exports, "HomeCoverV2", { enumerable: true, get: function () { return HomeCover_2.HomeCover; } });
|
|
228
228
|
//V2 data viz comps
|
|
229
|
-
var BarChart_1 = require("./v2/components/dataviz/BarChart");
|
|
230
|
-
Object.defineProperty(exports, "BarChart", { enumerable: true, get: function () { return BarChart_1.BarChart; } });
|
|
231
|
-
var PieChart_1 = require("./v2/components/dataviz/PieChart");
|
|
232
|
-
Object.defineProperty(exports, "PieChart", { enumerable: true, get: function () { return PieChart_1.PieChart; } });
|
|
233
|
-
var HeatMapGrid_1 = require("./v2/components/dataviz/HeatMapGrid");
|
|
234
|
-
Object.defineProperty(exports, "HeatMapGrid", { enumerable: true, get: function () { return HeatMapGrid_1.HeatMapGrid; } });
|
|
235
|
-
var BarGraphCollection_1 = require("./v2/components/dataviz/BarGraphCollection");
|
|
236
|
-
Object.defineProperty(exports, "BarGraphCollection", { enumerable: true, get: function () { return BarGraphCollection_1.BarGraphCollection; } });
|
|
237
|
-
var DataVizAccordion_1 = require("./v2/components/DataVizAccordion");
|
|
238
|
-
Object.defineProperty(exports, "DataVizAccordion", { enumerable: true, get: function () { return DataVizAccordion_1.DataVizAccordion; } });
|
|
239
229
|
var Accordion_2 = require("./v2/components/Accordion");
|
|
240
230
|
Object.defineProperty(exports, "AccordionV2", { enumerable: true, get: function () { return Accordion_2.Accordion; } });
|
|
241
231
|
var CheckboxList_1 = require("./v2/components/RadioAndCheckbox/comps/CheckboxList");
|
|
@@ -257,6 +247,4 @@ var List_1 = require("./v2/components/List");
|
|
|
257
247
|
Object.defineProperty(exports, "List", { enumerable: true, get: function () { return List_1.List; } });
|
|
258
248
|
var ListItem_1 = require("./v2/components/List/comps/ListItem");
|
|
259
249
|
Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return ListItem_1.ListItem; } });
|
|
260
|
-
var CustomTooltip_1 = require("./v2/components/dataviz/BarChart/comps/CustomTooltip");
|
|
261
|
-
Object.defineProperty(exports, "CustomTooltip", { enumerable: true, get: function () { return __importDefault(CustomTooltip_1).default; } });
|
|
262
250
|
exports.baseStyling = __importStar(require("./v2/themes/utils/baseStyling"));
|
|
@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.BarChart = void 0;
|
|
7
7
|
var react_1 = __importDefault(require("react"));
|
|
8
|
-
var BarChart_1 = require("../../../v2/components/dataviz/BarChart");
|
|
9
8
|
var Accordion_1 = require("../../../v2/components/Accordion");
|
|
10
9
|
// import BarChartDocs from './BarChart.mdx'
|
|
11
10
|
exports.default = {
|
package/package.json
CHANGED
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.DataVizAccordion = void 0;
|
|
7
|
-
var react_1 = __importDefault(require("react"));
|
|
8
|
-
var DataVizAccordion_1 = require("../../../v2/components/DataVizAccordion");
|
|
9
|
-
// import BarChartDocs from './BarChart.mdx'
|
|
10
|
-
exports.default = {
|
|
11
|
-
title: "Oolib V 2.0/components/DataVizAccordion",
|
|
12
|
-
// argTypes: {
|
|
13
|
-
// HeaderStyle: {
|
|
14
|
-
// options: ["HeaderStyle1", "HeaderStyle2", "HeaderStyle3"],
|
|
15
|
-
// control: { type: "inline-radio" },
|
|
16
|
-
// defaultValue: "HeaderStyle1",
|
|
17
|
-
// },
|
|
18
|
-
// percent: {
|
|
19
|
-
// control: { type: 'range', min: 1, max: 100, step: 1 },
|
|
20
|
-
// defaultValue: 39,
|
|
21
|
-
// table: {
|
|
22
|
-
// category: 'HeaderStyle 2 Options',
|
|
23
|
-
// },
|
|
24
|
-
// },
|
|
25
|
-
// infoTooltip: {
|
|
26
|
-
// control: { type: 'text' },
|
|
27
|
-
// defaultValue: '',
|
|
28
|
-
// table: {
|
|
29
|
-
// category: 'HeaderStyle 2 Options',
|
|
30
|
-
// },
|
|
31
|
-
// },
|
|
32
|
-
// showPercent: {
|
|
33
|
-
// table: {
|
|
34
|
-
// category: 'HeaderStyle 2 Options',
|
|
35
|
-
// },
|
|
36
|
-
// },
|
|
37
|
-
// },
|
|
38
|
-
// args: {
|
|
39
|
-
// // invert: false,
|
|
40
|
-
// title: "This is the title",
|
|
41
|
-
// label: "Label",
|
|
42
|
-
// infoTooltip: '',
|
|
43
|
-
// showPercent: true
|
|
44
|
-
// },
|
|
45
|
-
parameters: {
|
|
46
|
-
// docs: {
|
|
47
|
-
// page: BarChartDocs,
|
|
48
|
-
// },
|
|
49
|
-
},
|
|
50
|
-
};
|
|
51
|
-
// Updated data for stacked bar chart
|
|
52
|
-
var data = [
|
|
53
|
-
{
|
|
54
|
-
display: "Logged In Once",
|
|
55
|
-
stack1: 60,
|
|
56
|
-
stack2: 20,
|
|
57
|
-
stack3: 40,
|
|
58
|
-
stack4: 10,
|
|
59
|
-
stack5: 40,
|
|
60
|
-
stack6: 10,
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
display: "Registered Users",
|
|
64
|
-
stack1: 100,
|
|
65
|
-
stack2: 50,
|
|
66
|
-
stack3: 10,
|
|
67
|
-
stack4: 15,
|
|
68
|
-
stack5: 40,
|
|
69
|
-
stack6: 10,
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
display: "Created Profile",
|
|
73
|
-
stack1: 20,
|
|
74
|
-
stack2: 5,
|
|
75
|
-
stack3: 10,
|
|
76
|
-
stack4: 15,
|
|
77
|
-
stack5: 40,
|
|
78
|
-
stack6: 10,
|
|
79
|
-
},
|
|
80
|
-
{
|
|
81
|
-
display: "Wrote at least 3 story",
|
|
82
|
-
stack1: 8,
|
|
83
|
-
stack2: 2,
|
|
84
|
-
stack3: 1,
|
|
85
|
-
stack4: 1,
|
|
86
|
-
stack5: 40,
|
|
87
|
-
stack6: 10,
|
|
88
|
-
},
|
|
89
|
-
{
|
|
90
|
-
display: "Created Profile again",
|
|
91
|
-
stack1: 20,
|
|
92
|
-
stack2: 5,
|
|
93
|
-
stack3: 10,
|
|
94
|
-
stack4: 15,
|
|
95
|
-
stack5: 40,
|
|
96
|
-
stack6: 10,
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
display: "Wrote at least 1 story",
|
|
100
|
-
stack1: 8,
|
|
101
|
-
stack2: 2,
|
|
102
|
-
stack3: 1,
|
|
103
|
-
stack4: 1,
|
|
104
|
-
stack5: 40,
|
|
105
|
-
stack6: 10,
|
|
106
|
-
},
|
|
107
|
-
];
|
|
108
|
-
var DataVizAccordion = function (args) {
|
|
109
|
-
var colors = ["#5C80FF", "#FFA800", "#00BC8F", "#5C51CE"];
|
|
110
|
-
var handleBarClick = function (name) {
|
|
111
|
-
console.log("Bar clicked: ".concat(name));
|
|
112
|
-
};
|
|
113
|
-
return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "5rem" } },
|
|
114
|
-
react_1.default.createElement(DataVizAccordion_1.DataVizAccordion, { chartOptions: [
|
|
115
|
-
{
|
|
116
|
-
display: "Stacked Bar Chart",
|
|
117
|
-
comp: "BarChart",
|
|
118
|
-
props: { breakdownDisplayType: "stacked" },
|
|
119
|
-
},
|
|
120
|
-
{
|
|
121
|
-
display: "Grouped Bar Chart",
|
|
122
|
-
comp: "BarChart",
|
|
123
|
-
props: { breakdownDisplayType: "grouped" },
|
|
124
|
-
},
|
|
125
|
-
], data: data, plotDataPoint: "percentage" // This can be changed to count
|
|
126
|
-
, valuePath: ["stack1", "stack2", "stack3", "stack4", "stack5", "stack6"],
|
|
127
|
-
// valuePath="stack1"
|
|
128
|
-
labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: true, colorIdx: 0 }),
|
|
129
|
-
react_1.default.createElement(DataVizAccordion_1.DataVizAccordion, { chartOptions: [
|
|
130
|
-
{
|
|
131
|
-
display: "Bar Chart",
|
|
132
|
-
comp: "BarChart",
|
|
133
|
-
},
|
|
134
|
-
{
|
|
135
|
-
display: "Pie Chart",
|
|
136
|
-
comp: "PieChart",
|
|
137
|
-
},
|
|
138
|
-
], data: data, plotDataPoint: "percentage" // This can be changed to count
|
|
139
|
-
, valuePath: "stack1", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: true, colorIdx: 0 })));
|
|
140
|
-
};
|
|
141
|
-
exports.DataVizAccordion = DataVizAccordion;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
declare namespace _default {
|
|
2
|
-
let title: string;
|
|
3
|
-
namespace argTypes {
|
|
4
|
-
namespace showPercent {
|
|
5
|
-
let control: string;
|
|
6
|
-
let description: string;
|
|
7
|
-
let defaultValue: boolean;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
namespace args {
|
|
11
|
-
let showPercent_1: boolean;
|
|
12
|
-
export { showPercent_1 as showPercent };
|
|
13
|
-
}
|
|
14
|
-
namespace parameters {
|
|
15
|
-
namespace docs {
|
|
16
|
-
export { BarChartDocs as page };
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
export default _default;
|
|
21
|
-
export function _BarChart(args: any): React.JSX.Element;
|
|
22
|
-
import BarChartDocs from './BarChart.mdx';
|
|
23
|
-
import React from "react";
|
|
@@ -1,251 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports._BarChart = void 0;
|
|
7
|
-
var react_1 = __importDefault(require("react"));
|
|
8
|
-
var BarChart_mdx_1 = __importDefault(require("./BarChart.mdx"));
|
|
9
|
-
var BarChart_1 = require("../../../../v2/components/dataviz/BarChart");
|
|
10
|
-
exports.default = {
|
|
11
|
-
title: "Oolib V 2.0/Visualization/BarChart",
|
|
12
|
-
argTypes: {
|
|
13
|
-
showPercent: {
|
|
14
|
-
control: 'boolean',
|
|
15
|
-
description: 'Toggle percentage display',
|
|
16
|
-
defaultValue: true,
|
|
17
|
-
}
|
|
18
|
-
},
|
|
19
|
-
args: {
|
|
20
|
-
showPercent: true,
|
|
21
|
-
},
|
|
22
|
-
parameters: {
|
|
23
|
-
docs: {
|
|
24
|
-
page: BarChart_mdx_1.default,
|
|
25
|
-
},
|
|
26
|
-
},
|
|
27
|
-
};
|
|
28
|
-
// Updated data for stacked bar chart
|
|
29
|
-
var data = [
|
|
30
|
-
{ display: "Logged In Once", stack1: 60, stack2: 20, stack3: 40 },
|
|
31
|
-
{ display: "Registered Users", stack1: 100, stack2: 50 },
|
|
32
|
-
{ display: "Created Profile", stack1: 20, stack2: 5, stack3: 10, stack4: 15 },
|
|
33
|
-
{ display: "Wrote at least 1 story", stack1: 8, stack2: 2 },
|
|
34
|
-
];
|
|
35
|
-
var _BarChart = function (args) {
|
|
36
|
-
var colors = ["#5C80FF", "#FFA800", "#00BC8F", "#5C51CE"];
|
|
37
|
-
var handleBarClick = function (name) {
|
|
38
|
-
console.log("Bar clicked: ".concat(name));
|
|
39
|
-
};
|
|
40
|
-
return (react_1.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px", padding: '20px' } },
|
|
41
|
-
react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
|
|
42
|
-
react_1.default.createElement(BarChart_1.BarChart, { overflowAfterHeight: 300, showPercent: args.showPercent, data: [
|
|
43
|
-
{
|
|
44
|
-
display: "Logged In Once",
|
|
45
|
-
stack1: 0, stack2: 23, stack3: 67, stack4: 12, stack5: 89,
|
|
46
|
-
stack6: 34, stack7: 56, stack8: 78, stack9: 21, stack10: 43,
|
|
47
|
-
stack11: 65, stack12: 87, stack13: 32, stack14: 54, stack15: 76,
|
|
48
|
-
stack16: 19, stack17: 41, stack18: 63, stack19: 85, stack20: 28,
|
|
49
|
-
stack2Display: 'Labels Path Stack 2 Display'
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
display: "Registered Users",
|
|
53
|
-
stack1: 0, stack3: 71, stack4: 25, stack5: 84,
|
|
54
|
-
stack6: 47, stack7: 69, stack8: 13, stack9: 56, stack10: 91,
|
|
55
|
-
stack11: 29, stack12: 73, stack13: 46, stack14: 82, stack15: 17,
|
|
56
|
-
stack16: 64, stack17: 39, stack18: 75, stack19: 22, stack20: 58
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
display: "Created Profile",
|
|
60
|
-
stack1: 33, stack2: 77, stack3: 14, stack4: 59, stack5: 86,
|
|
61
|
-
stack6: 31, stack7: 68, stack8: 42, stack9: 95, stack10: 26,
|
|
62
|
-
stack11: 71, stack12: 48, stack13: 83, stack14: 16, stack15: 62,
|
|
63
|
-
stack16: 37, stack17: 74, stack18: 29, stack19: 85, stack20: 51
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
display: "Wrote at least 3 story",
|
|
67
|
-
stack1: 18, stack2: 52, stack3: 79, stack4: 35, stack5: 61,
|
|
68
|
-
stack6: 93, stack7: 24, stack8: 67, stack9: 41, stack10: 88,
|
|
69
|
-
stack11: 15, stack12: 53, stack13: 76, stack14: 32, stack15: 68,
|
|
70
|
-
stack16: 94, stack17: 27, stack18: 49, stack19: 81, stack20: 36
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
display: "Created Profile again",
|
|
74
|
-
stack1: 44, stack2: 87, stack3: 21, stack4: 63, stack5: 96,
|
|
75
|
-
stack6: 38, stack7: 72, stack8: 55, stack9: 19, stack10: 81,
|
|
76
|
-
stack11: 46, stack12: 92, stack13: 28, stack14: 65, stack15: 37,
|
|
77
|
-
stack16: 74, stack17: 51, stack18: 83, stack19: 26, stack20: 69
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
display: "Wrote at least 1 story",
|
|
81
|
-
stack1: 57, stack2: 23, stack3: 89, stack4: 41, stack5: 76,
|
|
82
|
-
stack6: 12, stack7: 64, stack8: 98, stack9: 33, stack10: 78,
|
|
83
|
-
stack11: 55, stack12: 17, stack13: 91, stack14: 48, stack15: 82,
|
|
84
|
-
stack16: 26, stack17: 69, stack18: 43, stack19: 95, stack20: 31
|
|
85
|
-
}
|
|
86
|
-
], plotDataPoint: "percentage", valuePath: [
|
|
87
|
-
"stack1", "stack2", "stack3", "stack4", "stack5",
|
|
88
|
-
// "stack6", "stack7", "stack8", "stack9", "stack10",
|
|
89
|
-
// "stack11", "stack12", "stack13", "stack14", "stack15",
|
|
90
|
-
// "stack16", "stack17", "stack18", "stack19", "stack20"
|
|
91
|
-
], breakdownCategoryName: "Age of org.", tooltipLabelsMapping: {
|
|
92
|
-
stack1: 'Stack 1', stack2: 'Stack 2', stack3: 'Stack 3', stack4: 'Stack 4', stack5: 'Stack 5',
|
|
93
|
-
stack6: 'Stack 6', stack7: 'Stack 7', stack8: 'Stack 8', stack9: 'Stack 9', stack10: 'Stack 10',
|
|
94
|
-
stack11: 'Stack 11', stack12: 'Stack 12', stack13: 'Stack 13', stack14: 'Stack 14', stack15: 'Stack 15',
|
|
95
|
-
stack16: 'Stack 16', stack17: 'Stack 17', stack18: 'Stack 18', stack19: 'Stack 19', stack20: 'Stack 20'
|
|
96
|
-
}, labelPath: "display", title: "This is a Stacked BarChart with 20 Stacks", onClick: handleBarClick, colorIdx: 2 })),
|
|
97
|
-
react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
|
|
98
|
-
react_1.default.createElement(BarChart_1.BarChart, { data: [
|
|
99
|
-
{
|
|
100
|
-
display: "Logged In Once During the First Week of Registration and Completed the Basic Profile Section Without Abandoning the Process",
|
|
101
|
-
stack1: 60
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
display: "Registered Users Who Successfully Verified Their Email Address and Set Up Two-Factor Authentication for Enhanced Account Security",
|
|
105
|
-
stack1: 100
|
|
106
|
-
},
|
|
107
|
-
{
|
|
108
|
-
display: "Created Profile With All Recommended Fields Including Biography, Education History, Work Experience, and Personal Interests",
|
|
109
|
-
stack1: 20
|
|
110
|
-
},
|
|
111
|
-
{
|
|
112
|
-
display: "Wrote at least 3 stories With Over 2,000 Words Each and Received More Than 50 Positive Engagements from Other Community Members",
|
|
113
|
-
stack1: 0
|
|
114
|
-
},
|
|
115
|
-
{
|
|
116
|
-
display: "Created Profile again After Deleting Their Previous One Due to Privacy Concerns or Desire to Start Fresh with New Information",
|
|
117
|
-
stack1: 20
|
|
118
|
-
},
|
|
119
|
-
{
|
|
120
|
-
display: "Wrote at least 1 story That Was Featured on the Homepage and Remained in the Top Trending Section for More Than 48 Hours",
|
|
121
|
-
stack1: 8
|
|
122
|
-
},
|
|
123
|
-
{
|
|
124
|
-
display: "Completed Onboarding Including All Optional Tutorials and Achieved a Perfect Score on the Platform Knowledge Assessment Test",
|
|
125
|
-
stack1: 78
|
|
126
|
-
},
|
|
127
|
-
{
|
|
128
|
-
display: "Added Payment Method and Set Up Recurring Billing for Premium Subscription Without Encountering Any Technical Issues During Checkout",
|
|
129
|
-
stack1: 42
|
|
130
|
-
},
|
|
131
|
-
{
|
|
132
|
-
display: "Made First Purchase Within 24 Hours of Creating Their Account and Left a Five-Star Review for the Product or Service",
|
|
133
|
-
stack1: 35
|
|
134
|
-
},
|
|
135
|
-
{
|
|
136
|
-
display: "Referred a Friend Through the Official Referral Program and Both Received the Maximum Possible Bonus Credits as a Result",
|
|
137
|
-
stack1: 27
|
|
138
|
-
},
|
|
139
|
-
{
|
|
140
|
-
display: "Participated in the Annual User Satisfaction Survey and Provided Detailed Feedback on Potential Platform Improvements",
|
|
141
|
-
stack1: 54
|
|
142
|
-
},
|
|
143
|
-
{
|
|
144
|
-
display: "Downloaded the Mobile Application on Multiple Devices and Enabled Cross-Platform Synchronization for Seamless User Experience",
|
|
145
|
-
stack1: 89
|
|
146
|
-
},
|
|
147
|
-
{
|
|
148
|
-
display: "Configured Advanced Notification Preferences to Receive Real-Time Alerts for Specific Activities Relevant to Their Interests",
|
|
149
|
-
stack1: 31
|
|
150
|
-
},
|
|
151
|
-
{
|
|
152
|
-
display: "Successfully Recovered Account After Forgetting Password by Following the Secure Password Reset Protocol Without Support Assistance",
|
|
153
|
-
stack1: 46
|
|
154
|
-
},
|
|
155
|
-
{
|
|
156
|
-
display: "Achieved Gold Tier Status in the Loyalty Program by Consistently Engaging with the Platform for More Than Six Consecutive Months",
|
|
157
|
-
stack1: 15
|
|
158
|
-
},
|
|
159
|
-
{
|
|
160
|
-
display: "Converted From Free Trial to Paid Subscription Before the Trial Period Ended and Opted for the Annual Payment Plan with Auto-Renewal",
|
|
161
|
-
stack1: 67
|
|
162
|
-
},
|
|
163
|
-
{
|
|
164
|
-
display: "Customized Their Dashboard Layout to Optimize Workflow Efficiency Based on Their Unique Usage Patterns and Preferences",
|
|
165
|
-
stack1: 72
|
|
166
|
-
},
|
|
167
|
-
{
|
|
168
|
-
display: "Signed Up for Beta Testing Program and Provided Valuable Feedback on Experimental Features Before General Public Release",
|
|
169
|
-
stack1: 19
|
|
170
|
-
},
|
|
171
|
-
{
|
|
172
|
-
display: "Linked All Available Social Media Accounts to Enable Cross-Platform Sharing and Enhanced Social Networking Capabilities",
|
|
173
|
-
stack1: 38
|
|
174
|
-
},
|
|
175
|
-
{
|
|
176
|
-
display: "Reported a Critical Bug That Was Subsequently Fixed in the Next Software Update and Received Official Recognition for the Contribution",
|
|
177
|
-
stack1: 5
|
|
178
|
-
}
|
|
179
|
-
], plotDataPoint: "percentage" // This can be changed to count
|
|
180
|
-
,
|
|
181
|
-
// valuePath={["stack1", "stack2", "stack3", "stack4", "stack5", "stack6"]}
|
|
182
|
-
valuePath: "stack1", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: args.showPercent, colorIdx: 2 })),
|
|
183
|
-
react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
|
|
184
|
-
react_1.default.createElement(BarChart_1.BarChart, { data: [
|
|
185
|
-
{
|
|
186
|
-
display: "Logged In Once",
|
|
187
|
-
stack1: 60,
|
|
188
|
-
stack2: 20,
|
|
189
|
-
stack3: 40,
|
|
190
|
-
stack4: 10,
|
|
191
|
-
stack5: 40,
|
|
192
|
-
stack6: 10,
|
|
193
|
-
},
|
|
194
|
-
{
|
|
195
|
-
display: "Registered Users",
|
|
196
|
-
stack1: 100,
|
|
197
|
-
stack2: 50,
|
|
198
|
-
stack3: 10,
|
|
199
|
-
stack4: 15,
|
|
200
|
-
stack5: 40,
|
|
201
|
-
stack6: 10,
|
|
202
|
-
},
|
|
203
|
-
{
|
|
204
|
-
display: "Created Profile",
|
|
205
|
-
stack1: 20,
|
|
206
|
-
stack2: 5,
|
|
207
|
-
stack3: 10,
|
|
208
|
-
stack4: 15,
|
|
209
|
-
stack5: 40,
|
|
210
|
-
stack6: 10,
|
|
211
|
-
},
|
|
212
|
-
{
|
|
213
|
-
display: "Wrote at least 3 story",
|
|
214
|
-
stack1: 8,
|
|
215
|
-
stack2: 2,
|
|
216
|
-
stack3: 1,
|
|
217
|
-
stack4: 1,
|
|
218
|
-
stack5: 40,
|
|
219
|
-
stack6: 10,
|
|
220
|
-
},
|
|
221
|
-
{
|
|
222
|
-
display: "Created Profile again",
|
|
223
|
-
stack1: 20,
|
|
224
|
-
stack2: 5,
|
|
225
|
-
stack3: 10,
|
|
226
|
-
stack4: 15,
|
|
227
|
-
stack5: 40,
|
|
228
|
-
stack6: 10,
|
|
229
|
-
},
|
|
230
|
-
{
|
|
231
|
-
display: "Wrote at least 1 story",
|
|
232
|
-
stack1: 8,
|
|
233
|
-
stack2: 2,
|
|
234
|
-
stack3: 1,
|
|
235
|
-
stack4: 1,
|
|
236
|
-
stack5: 40,
|
|
237
|
-
stack6: 10,
|
|
238
|
-
},
|
|
239
|
-
], plotDataPoint: "percentage" // This can be changed to count
|
|
240
|
-
, valuePath: [
|
|
241
|
-
"stack1",
|
|
242
|
-
"stack2",
|
|
243
|
-
"stack3",
|
|
244
|
-
"stack4",
|
|
245
|
-
"stack5",
|
|
246
|
-
"stack6",
|
|
247
|
-
],
|
|
248
|
-
// valuePath="stack1"
|
|
249
|
-
breakdownDisplayType: "stacked", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: args.showPercent, colorIdx: 2 }))));
|
|
250
|
-
};
|
|
251
|
-
exports._BarChart = _BarChart;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
declare namespace _default {
|
|
2
|
-
let title: string;
|
|
3
|
-
namespace argTypes {
|
|
4
|
-
namespace showPercent {
|
|
5
|
-
let name: string;
|
|
6
|
-
let control: string;
|
|
7
|
-
let description: string;
|
|
8
|
-
let defaultValue: boolean;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
namespace args {
|
|
12
|
-
let showPercent_1: boolean;
|
|
13
|
-
export { showPercent_1 as showPercent };
|
|
14
|
-
export let debug: boolean;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
export default _default;
|
|
18
|
-
export function _BarGraphCollection_(args: any): React.JSX.Element;
|
|
19
|
-
import React from "react";
|