blixify-ui-web 1.2.183 → 1.2.185

package/lib/components/data/dataGraph/index.js

@@ -82,6 +82,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleIsShapedChart = void 0;
 exports.DataGraph = DataGraph;
 var solid_1 = require("@heroicons/react/24/solid");
 var axios_1 = __importDefault(require("axios"));
@@ -93,19 +94,50 @@ var card_1 = require("../../chart/card");
 var lineChart_1 = require("../../chart/lineChart");
 var pieChart_1 = require("../../chart/pieChart");
 var radarChart_1 = require("../../chart/radarChart");
+var textButton_1 = require("../../action/textButton");
 var loading_1 = require("../../display/loading");
-var tag_1 = require("../../display/tag");
 var select_1 = require("../../input/select");
 var readQuery_1 = require("../readQuery");
 var stories_1 = require("../stories");
 var utils_1 = require("../utils");
 var allIcons = __importStar(require("@heroicons/react/24/solid"));
+var chartErrorBoundary_1 = require("./chartErrorBoundary");
+var chartErrors_1 = require("./chartErrors");
+var chartResults_1 = require("./chartResults");
+var MAX_SEGMENTS = 10;
+var DEFAULT_INTERVAL_SPAN = {
+    day: [30, "day"],
+    week: [12, "week"],
+    month: [12, "month"],
+};
+// INFO: written out so Tailwind keeps every width in a consumer's CSS build
+var GRID_SPAN_CLASS = {
+    1: "col-span-1",
+    2: "col-span-2",
+    3: "col-span-3",
+    4: "col-span-4",
+};
+/**
+ * A chart drawn from new-style options — group by any column, date buckets,
+ * segments — rather than one query per list value.
+ */
+var handleIsShapedChart = function (chart) {
+    return chart.type !== "radar" &&
+        !!(chart.groupBy || chart.queryDateInterval || chart.segmentBy);
+};
+exports.handleIsShapedChart = handleIsShapedChart;
 function DataGraph(props) {
     var _this = this;
     var _a = (0, react_1.useState)({}), graphAnalyticsData = _a[0], setGraphAnalyticsData = _a[1];
     var _b = (0, react_1.useState)({}), graphAnalyticsFilter = _b[0], setGraphAnalyticsFilter = _b[1];
     var _c = (0, react_1.useState)({}), graphAnalyticsError = _c[0], setGraphAnalyticsError = _c[1];
+    var _d = (0, react_1.useState)({}), graphSeries = _d[0], setGraphSeries = _d[1];
+    var _e = (0, react_1.useState)({}), retryCount = _e[0], setRetryCount = _e[1];
+    var _f = (0, react_1.useState)({}), detailsOpen = _f[0], setDetailsOpen = _f[1];
     var oldGraphAnalyticsFilterRef = (0, react_1.useRef)({});
+    // INFO: the latest load of each chart; an older answer arriving after a
+    // newer one is dropped, so the builder preview never shows past settings
+    var loadSequenceRef = (0, react_1.useRef)({});
     var oldChartListRef = (0, react_1.useRef)([]);
     var SpaceRQ = function (server, collection, api, apiToken, userToken) {
         return new readQuery_1.ReadQuery({
@@ -132,74 +164,21 @@ function DataGraph(props) {
         if (graphAnalyticsDataChangedKey) {
             var selectedChart = props.charts.find(function (eachCharts) { return eachCharts.title === graphAnalyticsDataChangedKey; });
             var handleGetUpdatedGraph = function (selectedChart) { return __awaiter(_this, void 0, void 0, function () {
-                var clonedGraphAnalyticsData, clonedGraphAnalyticsError_1, _a, data, error, radarAttributeIdKeys_1, localData_1, clonedGraphAnalyticsFilter;
-                var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var clonedGraphAnalyticsFilter;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
-                            if (!selectedChart) return [3 /*break*/, 5];
-                            clonedGraphAnalyticsData = JSON.parse(JSON.stringify(graphAnalyticsData));
-                            clonedGraphAnalyticsError_1 = JSON.parse(JSON.stringify(graphAnalyticsError));
-                            if (!(selectedChart.type !== "radar")) return [3 /*break*/, 2];
-                            return [4 /*yield*/, handleReadGraphDetail(selectedChart)];
+                            if (!selectedChart) return [3 /*break*/, 2];
+                            return [4 /*yield*/, handleLoadChart(selectedChart, graphAnalyticsFilter)];
                         case 1:
-                            _a = _b.sent(), data = _a.data, error = _a.error;
-                            clonedGraphAnalyticsData[selectedChart.title] = data;
-                            clonedGraphAnalyticsError_1[selectedChart.title] = error;
-                            return [3 /*break*/, 4];
-                        case 2:
-                            if (!selectedChart.queryAttributeId) return [3 /*break*/, 4];
-                            radarAttributeIdKeys_1 = {};
-                            localData_1 = [];
-                            selectedChart.query.map(function (eachQuery) {
-                                localData_1.push({
-                                    id: eachQuery.value,
-                                    value: [],
-                                });
-                                return null;
-                            });
-                            return [4 /*yield*/, Promise.all(selectedChart.queryAttributeId.map(function (eachAttribute) { return __awaiter(_this, void 0, void 0, function () {
-                                    var _a, data, error;
-                                    return __generator(this, function (_b) {
-                                        switch (_b.label) {
-                                            case 0: return [4 /*yield*/, handleReadGraphDetail(selectedChart, eachAttribute)];
-                                            case 1:
-                                                _a = _b.sent(), data = _a.data, error = _a.error;
-                                                data.map(function (eachData) {
-                                                    if (!radarAttributeIdKeys_1[eachAttribute])
-                                                        radarAttributeIdKeys_1[eachAttribute] = [];
-                                                    radarAttributeIdKeys_1[eachAttribute].push(eachData.value);
-                                                    return null;
-                                                });
-                                                clonedGraphAnalyticsError_1[selectedChart.title] = error;
-                                                return [2 /*return*/];
-                                        }
-                                    });
-                                }); }))];
-                        case 3:
-                            _b.sent();
-                            selectedChart.queryAttributeId.map(function (eachAttribute) {
-                                if (radarAttributeIdKeys_1[eachAttribute] &&
-                                    radarAttributeIdKeys_1[eachAttribute].length > 0) {
-                                    radarAttributeIdKeys_1[eachAttribute].map(function (value, index) {
-                                        localData_1[index].value.push(value);
-                                        return null;
-                                    });
-                                }
-                                return null;
-                            });
-                            clonedGraphAnalyticsData[selectedChart.title] = localData_1;
-                            _b.label = 4;
-                        case 4:
-                            setGraphAnalyticsData(clonedGraphAnalyticsData);
-                            setGraphAnalyticsError(clonedGraphAnalyticsError_1);
+                            _a.sent();
                             clonedGraphAnalyticsFilter = handleCloneGraphAnalyticsFilter();
                             clonedGraphAnalyticsFilter[graphAnalyticsDataChangedKey].loading =
                                 false;
                             oldGraphAnalyticsFilterRef.current = graphAnalyticsFilter;
                             setGraphAnalyticsFilter(clonedGraphAnalyticsFilter);
-                            _b.label = 5;
-                        case 5: return [2 /*return*/];
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
                     }
                 });
             }); };
@@ -258,18 +237,26 @@ function DataGraph(props) {
         }
         return splitDateTimes;
     };
-    var handleSetGraphDateRange = function (eachChart, dateRange) {
+    var handleResolveRange = function (eachChart, dateRange) {
         var _a, _b, _c, _d, _e;
-        var range = [];
-        var startDate = (_a = dateRange === null || dateRange === void 0 ? void 0 : dateRange.startDate) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().subtract(7, "days").toDate();
-        var endDate = (_b = dateRange === null || dateRange === void 0 ? void 0 : dateRange.endDate) !== null && _b !== void 0 ? _b : (0, dayjs_1.default)().toDate();
-        var customRange = {
+        var span = eachChart.queryDateInterval
+            ? DEFAULT_INTERVAL_SPAN[eachChart.queryDateInterval]
+            : undefined;
+        var startDate = (_a = dateRange === null || dateRange === void 0 ? void 0 : dateRange.startDate) !== null && _a !== void 0 ? _a : (span
+            ? (0, dayjs_1.default)().subtract(span[0] - 1, span[1]).startOf(span[1]).toDate()
+            : (0, dayjs_1.default)().subtract(7, "days").toDate());
+        return {
             startDate: startDate,
-            endDate: endDate,
+            endDate: (_b = dateRange === null || dateRange === void 0 ? void 0 : dateRange.endDate) !== null && _b !== void 0 ? _b : (0, dayjs_1.default)().toDate(),
             startTime: (_c = dateRange === null || dateRange === void 0 ? void 0 : dateRange.startTime) !== null && _c !== void 0 ? _c : "00:00:00",
             endTime: (_d = dateRange === null || dateRange === void 0 ? void 0 : dateRange.endTime) !== null && _d !== void 0 ? _d : "23:59:59",
             isDuration: ((_e = dateRange === null || dateRange === void 0 ? void 0 : dateRange.isDuration) !== null && _e !== void 0 ? _e : eachChart.queryBaseDateId) ? true : false,
         };
+    };
+    var handleSetGraphDateRange = function (eachChart, dateRange) {
+        var range = [];
+        var customRange = handleResolveRange(eachChart, dateRange);
+        var startDate = customRange.startDate, endDate = customRange.endDate;
         switch (eachChart.type) {
             case "pie":
             case "bar":
@@ -297,29 +284,60 @@ function DataGraph(props) {
         }
         return range;
     };
-    var handleReadGraphDetail = function (eachChart, currentAttribute) { return __awaiter(_this, void 0, void 0, function () {
-        var dataList, error, range, filterQuery, requestData, devSettings, spaceRQ, j, eachQuery, clonedRequestData, res, err_1, errorObj, clonedRequestData, res, err_2, errorObj;
-        var _a, _b, _c, _d, _e;
-        return __generator(this, function (_f) {
-            switch (_f.label) {
+    // INFO: the date condition a drill-down adds so its records match the
+    // range the chart counted
+    var handleDateRangeQuery = function (eachChart, dateRange) {
+        if (!eachChart.queryBaseDateId)
+            return [];
+        var customRange = handleResolveRange(eachChart, dateRange);
+        var end = (0, dayjs_1.default)("".concat((0, dayjs_1.default)(customRange.endDate).format("YYYY-MM-DD"), " ").concat(customRange.endTime)).toDate();
+        // INFO: a single date counts everything up to it — the end date on a line,
+        // the start date with its time on every other chart, as the request does
+        if (!customRange.isDuration) {
+            var until = eachChart.type === "line"
+                ? end
+                : (0, dayjs_1.default)("".concat((0, dayjs_1.default)(customRange.startDate).format("YYYY-MM-DD"), " ").concat(customRange.startTime)).toDate();
+            return [{ type: "<", queryId: eachChart.queryBaseDateId, value: until }];
+        }
+        var start = (0, dayjs_1.default)("".concat((0, dayjs_1.default)(customRange.startDate).format("YYYY-MM-DD"), " ").concat(customRange.startTime)).toDate();
+        return [
+            { type: "><", queryId: eachChart.queryBaseDateId, value: [start, end] },
+        ];
+    };
+    var handleChartFilterQuery = function (eachChart, filters) {
+        var filterQuery = [];
+        if (filters[eachChart.title] && filters[eachChart.title].reference) {
+            filterQuery.push({
+                type: "=",
+                value: "".concat(filters[eachChart.title].reference),
+                queryId: "".concat(eachChart.queryReferenceId),
+            });
+        }
+        if (eachChart.baseQuery)
+            filterQuery = filterQuery.concat(eachChart.baseQuery);
+        return filterQuery;
+    };
+    var handleChartRQ = function (collectionId) {
+        var _a;
+        var devSettings = (0, utils_1.parseWorkspaceSettings)({
+            dbEndpoint: stories_1.defaultDBEndpoint,
+            imageEndpoint: stories_1.defaultImageEndpoint,
+            uploadEndpoint: stories_1.defaultUploadEndpoint,
+        }, props.workspace);
+        return SpaceRQ(devSettings.server, collectionId, (_a = props.workspace.apiEndpoint) !== null && _a !== void 0 ? _a : "", props.workspace.apiEndpointToken, props.workspace.apiUserToken);
+    };
+    var handleReadGraphDetail = function (eachChart, filters, currentAttribute) { return __awaiter(_this, void 0, void 0, function () {
+        var dataList, error, range, filterQuery, requestData, spaceRQ, queries, _i, queries_1, eachQuery, clonedRequestData, res, err_1;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
                     dataList = [];
-                    error = "";
-                    range = handleSetGraphDateRange(eachChart, graphAnalyticsFilter[eachChart.title] &&
-                        graphAnalyticsFilter[eachChart.title].range
-                        ? graphAnalyticsFilter[eachChart.title].range
+                    error = undefined;
+                    range = handleSetGraphDateRange(eachChart, filters[eachChart.title] && filters[eachChart.title].range
+                        ? filters[eachChart.title].range
                         : undefined);
-                    filterQuery = [];
-                    if (graphAnalyticsFilter[eachChart.title] &&
-                        graphAnalyticsFilter[eachChart.title].reference) {
-                        filterQuery.push({
-                            type: "=",
-                            value: "".concat(graphAnalyticsFilter[eachChart.title].reference),
-                            queryId: "".concat(eachChart.queryReferenceId),
-                        });
-                    }
-                    if (eachChart.baseQuery)
-                        filterQuery = filterQuery.concat(eachChart.baseQuery);
+                    filterQuery = handleChartFilterQuery(eachChart, filters);
                     requestData = {
                         type: "list",
                         aggregate: {
@@ -332,13 +350,12 @@ function DataGraph(props) {
                             timezone: dayjs_1.default.tz.guess(),
                         },
                     };
-                    if (graphAnalyticsFilter[eachChart.title] &&
-                        graphAnalyticsFilter[eachChart.title].filter) {
+                    if (filters[eachChart.title] && filters[eachChart.title].filter) {
                         requestData = {
                             type: "list",
                             aggregate: {
                                 type: (_b = eachChart.queryBaseType) !== null && _b !== void 0 ? _b : "count",
-                                queryId: graphAnalyticsFilter[eachChart.title].filter,
+                                queryId: filters[eachChart.title].filter,
                                 dateId: eachChart.queryBaseDateId
                                     ? eachChart.queryBaseDateId
                                     : "baseUpdatedAt",
@@ -347,138 +364,502 @@ function DataGraph(props) {
                             },
                         };
                     }
-                    devSettings = (0, utils_1.parseWorkspaceSettings)({
-                        dbEndpoint: stories_1.defaultDBEndpoint,
-                        imageEndpoint: stories_1.defaultImageEndpoint,
-                        uploadEndpoint: stories_1.defaultUploadEndpoint,
-                    }, props.workspace);
-                    spaceRQ = SpaceRQ(devSettings.server, eachChart.spaceId, (_c = props.workspace.apiEndpoint) !== null && _c !== void 0 ? _c : "", props.workspace.apiEndpointToken, props.workspace.apiUserToken);
-                    if (!((eachChart === null || eachChart === void 0 ? void 0 : eachChart.query) && eachChart.query.length > 0)) return [3 /*break*/, 7];
-                    j = 0;
-                    _f.label = 1;
+                    spaceRQ = handleChartRQ(eachChart.spaceId);
+                    queries = (eachChart === null || eachChart === void 0 ? void 0 : eachChart.query) && eachChart.query.length > 0 ? eachChart.query : [null];
+                    _i = 0, queries_1 = queries;
+                    _c.label = 1;
                 case 1:
-                    if (!(j < eachChart.query.length)) return [3 /*break*/, 6];
-                    _f.label = 2;
+                    if (!(_i < queries_1.length)) return [3 /*break*/, 6];
+                    eachQuery = queries_1[_i];
+                    _c.label = 2;
                 case 2:
-                    _f.trys.push([2, 4, , 5]);
-                    eachQuery = eachChart.query[j];
+                    _c.trys.push([2, 4, , 5]);
                     clonedRequestData = JSON.parse(JSON.stringify(requestData));
-                    clonedRequestData["query"] = __spreadArray([
-                        {
-                            type: eachQuery.type,
-                            value: eachQuery.value,
-                            queryId: eachQuery.queryId,
-                        }
-                    ], filterQuery, true);
+                    clonedRequestData["query"] = eachQuery
+                        ? __spreadArray([
+                            {
+                                type: eachQuery.type,
+                                value: eachQuery.value,
+                                queryId: eachQuery.queryId,
+                            }
+                        ], filterQuery, true) : filterQuery;
                     return [4 /*yield*/, spaceRQ.call(clonedRequestData)];
                 case 3:
-                    res = _f.sent();
+                    res = _c.sent();
                     if (res === null || res === void 0 ? void 0 : res.data)
                         dataList.push.apply(dataList, res.data);
                     else
                         throw new Error("Data Not Found");
                     return [3 /*break*/, 5];
                 case 4:
-                    err_1 = _f.sent();
-                    errorObj = JSON.parse(typeof err_1 === "string" ? err_1 : JSON.stringify(err_1));
-                    console.log(eachChart.title + " - " + ((_d = errorObj === null || errorObj === void 0 ? void 0 : errorObj.err) === null || _d === void 0 ? void 0 : _d.details));
+                    err_1 = _c.sent();
+                    error = (0, chartErrors_1.handleDescribeChartError)(err_1, eachChart);
+                    console.error("[DataGraph] - ".concat(eachChart.title, " - ").concat(error.details));
                     dataList.push({ id: "", value: 0 });
-                    error = "Error - Check console";
                     return [3 /*break*/, 5];
                 case 5:
-                    j++;
+                    _i++;
                     return [3 /*break*/, 1];
-                case 6: return [3 /*break*/, 10];
-                case 7:
-                    _f.trys.push([7, 9, , 10]);
-                    clonedRequestData = JSON.parse(JSON.stringify(requestData));
-                    if (filterQuery)
-                        clonedRequestData["query"] = filterQuery;
-                    return [4 /*yield*/, spaceRQ.call(clonedRequestData)];
-                case 8:
-                    res = _f.sent();
-                    if (res === null || res === void 0 ? void 0 : res.data)
-                        dataList.push.apply(dataList, res.data);
-                    else
-                        throw new Error("Data Not Found");
-                    return [3 /*break*/, 10];
-                case 9:
-                    err_2 = _f.sent();
-                    errorObj = JSON.parse(typeof err_2 === "string" ? err_2 : JSON.stringify(err_2));
-                    console.log(eachChart.title + " - " + ((_e = errorObj === null || errorObj === void 0 ? void 0 : errorObj.err) === null || _e === void 0 ? void 0 : _e.details));
-                    dataList.push({ id: "", value: 0 });
-                    error = "Error - Check console";
-                    return [3 /*break*/, 10];
-                case 10: return [2 /*return*/, { data: dataList, error: error }];
+                case 6: return [2 /*return*/, { data: dataList, error: error }];
             }
         });
     }); };
-    var handleGetGraphDetail = function () { return __awaiter(_this, void 0, void 0, function () {
-        var graphAnalytics, graphAnalyticsError;
+    // INFO: names for the ids a person or reference column groups by
+    var handleResolveGroupLabels = function (column, keys) { return __awaiter(_this, void 0, void 0, function () {
+        var labels, isReference, ids, labelId, res, err_2;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    labels = {};
+                    if (!column)
+                        return [2 /*return*/, labels];
+                    if (column.type === "person" || column.type === "listPerson") {
+                        ((_a = props.personOptions) !== null && _a !== void 0 ? _a : []).forEach(function (eachOption) {
+                            labels[String(eachOption.key)] = String(eachOption.label);
+                        });
+                        return [2 /*return*/, labels];
+                    }
+                    isReference = column.type === "reference" || column.type === "listReference";
+                    ids = Array.from(new Set(keys
+                        .flat()
+                        .filter(function (each) { return each !== null && each !== undefined && each !== ""; })
+                        .map(function (each) { return String(each); })));
+                    if (!isReference || !column.referenceSpaceId || ids.length === 0)
+                        return [2 /*return*/, labels];
+                    labelId = (_b = column.referenceLabel) !== null && _b !== void 0 ? _b : "name";
+                    _d.label = 1;
+                case 1:
+                    _d.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, handleChartRQ(column.referenceSpaceId).call({
+                            type: "list",
+                            query: [{ type: "in", queryId: "_id", value: ids }],
+                            attributeIds: [labelId],
+                            limit: ids.length,
+                        })];
+                case 2:
+                    res = _d.sent();
+                    ((_c = res === null || res === void 0 ? void 0 : res.data) !== null && _c !== void 0 ? _c : []).forEach(function (eachRecord) {
+                        if ((eachRecord === null || eachRecord === void 0 ? void 0 : eachRecord._id) && eachRecord[labelId] !== undefined)
+                            labels[String(eachRecord._id)] = String(eachRecord[labelId]);
+                    });
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_2 = _d.sent();
+                    // INFO: without names the ids still draw; the chart is not failed for it
+                    console.error("[DataGraph] - group labels failed:", err_2);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/, labels];
+            }
+        });
+    }); };
+    var handleFindColumn = function (columnId) {
+        var _a;
+        return columnId
+            ? (_a = props.structure) === null || _a === void 0 ? void 0 : _a.find(function (eachColumn) { return eachColumn.id === columnId; })
+            : undefined;
+    };
+    /**
+     * The points of a chart built from new-style options: one aggregate per
+     * group set, date buckets as ranges, and each segment as its own pass.
+     */
+    var handleReadShapedChart = function (eachChart, filters) { return __awaiter(_this, void 0, void 0, function () {
+        var filterRange, filterQuery, spaceRQ, dateId, isDateMode, buckets, range, aggregate, handleRunPoints, columnError, points, groupColumn_1, labels_1, shaped_1, shapedPoints, segments, err_3, error;
         var _this = this;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var _a, _b, _c, _d, _e;
+        return __generator(this, function (_f) {
+            switch (_f.label) {
                 case 0:
-                    graphAnalytics = {};
-                    graphAnalyticsError = {};
-                    if (!props.charts) return [3 /*break*/, 2];
-                    return [4 /*yield*/, Promise.all(props.charts.map(function (eachChart) { return __awaiter(_this, void 0, void 0, function () {
-                            var _a, data, error, localData_2;
-                            var _this = this;
-                            return __generator(this, function (_b) {
-                                switch (_b.label) {
-                                    case 0:
-                                        if (!(eachChart.type !== "radar")) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, handleReadGraphDetail(eachChart)];
-                                    case 1:
-                                        _a = _b.sent(), data = _a.data, error = _a.error;
-                                        graphAnalytics[eachChart.title] = data;
-                                        graphAnalyticsError[eachChart.title] = error;
-                                        return [3 /*break*/, 4];
-                                    case 2:
-                                        if (!eachChart.queryAttributeId) return [3 /*break*/, 4];
-                                        localData_2 = [];
-                                        eachChart.query.map(function (eachQuery) {
-                                            localData_2.push({
-                                                id: eachQuery.value,
-                                                value: [],
+                    filterRange = (_a = filters[eachChart.title]) === null || _a === void 0 ? void 0 : _a.range;
+                    filterQuery = handleChartFilterQuery(eachChart, filters);
+                    spaceRQ = handleChartRQ(eachChart.spaceId);
+                    dateId = (_b = eachChart.queryBaseDateId) !== null && _b !== void 0 ? _b : "baseUpdatedAt";
+                    isDateMode = !!eachChart.queryDateInterval &&
+                        !!eachChart.queryBaseDateId &&
+                        !eachChart.groupBy;
+                    buckets = isDateMode
+                        ? (function () {
+                            var resolved = handleResolveRange(eachChart, filterRange);
+                            return (0, chartResults_1.handleSplitDateInterval)(resolved.startDate, resolved.endDate, eachChart.queryDateInterval);
+                        })()
+                        : [];
+                    range = isDateMode
+                        ? buckets.map(function (eachBucket) { return eachBucket.range; })
+                        : handleSetGraphDateRange(eachChart, filterRange);
+                    aggregate = {
+                        type: (_c = eachChart.queryBaseType) !== null && _c !== void 0 ? _c : "count",
+                        queryId: (_e = (_d = eachChart.queryAttributeId) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : "",
+                        dateId: dateId,
+                        range: range,
+                        timezone: dayjs_1.default.tz.guess(),
+                    };
+                    handleRunPoints = function (extraQuery) { return __awaiter(_this, void 0, void 0, function () {
+                        var res, res, data_1, queries, sharedColumn, res, byKey_1;
+                        var _this = this;
+                        var _a, _b, _c;
+                        return __generator(this, function (_d) {
+                            switch (_d.label) {
+                                case 0:
+                                    if (!eachChart.groupBy) return [3 /*break*/, 2];
+                                    return [4 /*yield*/, spaceRQ.call({
+                                            type: "list",
+                                            query: __spreadArray(__spreadArray([], extraQuery, true), filterQuery, true),
+                                            aggregate: __assign(__assign({}, aggregate), { groupId: eachChart.groupBy }),
+                                        })];
+                                case 1:
+                                    res = _d.sent();
+                                    return [2 /*return*/, (0, chartResults_1.handleFlattenGroupedResult)(res === null || res === void 0 ? void 0 : res.data).map(function (eachGroup) {
+                                            var _a;
+                                            return ({
+                                                x: "",
+                                                y: (_a = eachGroup.value) !== null && _a !== void 0 ? _a : 0,
+                                                key: eachGroup.key,
+                                                query: (0, chartResults_1.handleGroupKeyQuery)(eachChart.groupBy, eachGroup.key),
                                             });
-                                            return null;
+                                        })];
+                                case 2:
+                                    if (!isDateMode) return [3 /*break*/, 4];
+                                    return [4 /*yield*/, spaceRQ.call({
+                                            type: "list",
+                                            query: __spreadArray(__spreadArray([], extraQuery, true), filterQuery, true),
+                                            aggregate: aggregate,
+                                        })];
+                                case 3:
+                                    res = _d.sent();
+                                    data_1 = (_a = res === null || res === void 0 ? void 0 : res.data) !== null && _a !== void 0 ? _a : [];
+                                    return [2 /*return*/, buckets.map(function (eachBucket, index) {
+                                            var _a, _b;
+                                            return ({
+                                                x: eachBucket.label,
+                                                y: (_b = (0, chartResults_1.handleToChartNumber)((_a = data_1[index]) === null || _a === void 0 ? void 0 : _a.value)) !== null && _b !== void 0 ? _b : 0,
+                                                key: eachBucket.label,
+                                                query: [
+                                                    {
+                                                        type: "><",
+                                                        queryId: dateId,
+                                                        value: [eachBucket.start, eachBucket.end],
+                                                    },
+                                                ],
+                                            });
+                                        })];
+                                case 4:
+                                    queries = (_b = eachChart.query) !== null && _b !== void 0 ? _b : [];
+                                    sharedColumn = (_c = queries[0]) === null || _c === void 0 ? void 0 : _c.queryId;
+                                    if (!(queries.length > 1 &&
+                                        sharedColumn &&
+                                        queries.every(function (eachQuery) {
+                                            return eachQuery.type === "=" && eachQuery.queryId === sharedColumn;
+                                        }))) return [3 /*break*/, 6];
+                                    return [4 /*yield*/, spaceRQ.call({
+                                            type: "list",
+                                            query: __spreadArray(__spreadArray([], extraQuery, true), filterQuery, true),
+                                            aggregate: __assign(__assign({}, aggregate), { groupId: sharedColumn }),
+                                        })];
+                                case 5:
+                                    res = _d.sent();
+                                    byKey_1 = new Map((0, chartResults_1.handleFlattenGroupedResult)(res === null || res === void 0 ? void 0 : res.data).map(function (eachGroup) {
+                                        var _a;
+                                        return [
+                                            JSON.stringify((_a = eachGroup.key) !== null && _a !== void 0 ? _a : null),
+                                            eachGroup.value,
+                                        ];
+                                    }));
+                                    return [2 /*return*/, queries.map(function (eachQuery, index) {
+                                            var _a, _b, _c, _d;
+                                            return ({
+                                                x: (_b = (_a = eachChart.seriesLabels) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : String(eachQuery.value),
+                                                y: (_d = byKey_1.get(JSON.stringify((_c = eachQuery.value) !== null && _c !== void 0 ? _c : null))) !== null && _d !== void 0 ? _d : 0,
+                                                key: eachQuery.value,
+                                                query: [eachQuery],
+                                            });
+                                        })];
+                                case 6: return [2 /*return*/, Promise.all(queries.map(function (eachQuery, index) { return __awaiter(_this, void 0, void 0, function () {
+                                        var res;
+                                        var _a, _b, _c, _d, _e;
+                                        return __generator(this, function (_f) {
+                                            switch (_f.label) {
+                                                case 0: return [4 /*yield*/, spaceRQ.call({
+                                                        type: "list",
+                                                        query: __spreadArray(__spreadArray([eachQuery], extraQuery, true), filterQuery, true),
+                                                        aggregate: aggregate,
+                                                    })];
+                                                case 1:
+                                                    res = _f.sent();
+                                                    return [2 /*return*/, {
+                                                            x: (_b = (_a = eachChart.seriesLabels) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : String(eachQuery.value),
+                                                            y: (_e = (0, chartResults_1.handleToChartNumber)((_d = (_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.value)) !== null && _e !== void 0 ? _e : 0,
+                                                            key: eachQuery.value,
+                                                            query: [eachQuery],
+                                                        }];
+                                            }
                                         });
-                                        return [4 /*yield*/, Promise.all(eachChart.queryAttributeId.map(function (eachAttribute) { return __awaiter(_this, void 0, void 0, function () {
-                                                var _a, data, error;
-                                                return __generator(this, function (_b) {
-                                                    switch (_b.label) {
-                                                        case 0: return [4 /*yield*/, handleReadGraphDetail(eachChart, eachAttribute)];
-                                                        case 1:
-                                                            _a = _b.sent(), data = _a.data, error = _a.error;
-                                                            data.map(function (eachData, index) {
-                                                                localData_2[index].value.push(eachData.value);
-                                                                return null;
-                                                            });
-                                                            graphAnalyticsError[eachChart.title] = error;
-                                                            return [2 /*return*/, null];
-                                                    }
-                                                });
-                                            }); }))];
-                                    case 3:
-                                        _b.sent();
-                                        graphAnalytics[eachChart.title] = localData_2;
-                                        _b.label = 4;
-                                    case 4: return [2 /*return*/];
+                                    }); }))];
+                            }
+                        });
+                    }); };
+                    _f.label = 1;
+                case 1:
+                    _f.trys.push([1, 7, , 8]);
+                    columnError = (0, chartErrors_1.handleCheckChartColumns)(eachChart, props.structure);
+                    if (columnError)
+                        return [2 /*return*/, { error: columnError }];
+                    return [4 /*yield*/, handleRunPoints([])];
+                case 2:
+                    points = _f.sent();
+                    groupColumn_1 = handleFindColumn(eachChart.groupBy);
+                    if (!eachChart.groupBy) return [3 /*break*/, 4];
+                    return [4 /*yield*/, handleResolveGroupLabels(groupColumn_1, points.map(function (eachPoint) { return eachPoint.key; }))];
+                case 3:
+                    labels_1 = _f.sent();
+                    points = points.map(function (eachPoint) { return (__assign(__assign({}, eachPoint), { x: (0, chartResults_1.handleGroupKeyLabel)(eachPoint.key, groupColumn_1, labels_1) })); });
+                    _f.label = 4;
+                case 4:
+                    shaped_1 = (0, chartResults_1.handleShapeChartPoints)(points, {
+                        sortBy: eachChart.sortBy,
+                        sortDirection: eachChart.sortDirection,
+                        // INFO: a time axis keeps every bucket in date order
+                        topN: isDateMode ? undefined : eachChart.topN,
+                        showOthers: eachChart.showOthers,
+                        // INFO: segments stay in counts, so a split chart is never a percentage
+                        showPercent: eachChart.showPercent && !eachChart.segmentBy,
+                        cumulative: isDateMode && eachChart.cumulative,
+                        measure: eachChart.queryBaseType,
+                    });
+                    shapedPoints = shaped_1.points.map(function (eachPoint) {
+                        return eachPoint.x === chartResults_1.OTHERS_LABEL && eachPoint.key === undefined
+                            ? __assign(__assign({}, eachPoint), { query: eachChart.groupBy
+                                    ? [
+                                        {
+                                            type: "in",
+                                            queryId: eachChart.groupBy,
+                                            value: shaped_1.hiddenKeys,
+                                        },
+                                    ]
+                                    : [] }) : eachPoint;
+                    });
+                    segments = undefined;
+                    if (!(eachChart.segmentBy && eachChart.type !== "pie")) return [3 /*break*/, 6];
+                    return [4 /*yield*/, handleReadSegments(eachChart, shapedPoints, handleRunPoints, filterQuery, filterRange)];
+                case 5:
+                    segments = _f.sent();
+                    _f.label = 6;
+                case 6: return [2 /*return*/, { series: { points: shapedPoints, segments: segments } }];
+                case 7:
+                    err_3 = _f.sent();
+                    error = (0, chartErrors_1.handleDescribeChartError)(err_3, eachChart);
+                    console.error("[DataGraph] - ".concat(eachChart.title, " - ").concat(error.details));
+                    return [2 /*return*/, { error: error }];
+                case 8: return [2 /*return*/];
+            }
+        });
+    }); };
+    // INFO: the values to split by — a list column's own options, otherwise the
+    // most common values — capped, with the rest drawn as "Others"
+    var handleReadSegments = function (eachChart, points, handleRunPoints, filterQuery, filterRange) { return __awaiter(_this, void 0, void 0, function () {
+        var segmentColumn, segmentKeys, res, labels, segments, rest;
+        var _this = this;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    segmentColumn = handleFindColumn(eachChart.segmentBy);
+                    segmentKeys = [];
+                    if (!((segmentColumn === null || segmentColumn === void 0 ? void 0 : segmentColumn.type) === "list" && ((_a = segmentColumn.listSelection) === null || _a === void 0 ? void 0 : _a.length))) return [3 /*break*/, 1];
+                    segmentKeys = segmentColumn.listSelection.slice(0, MAX_SEGMENTS);
+                    return [3 /*break*/, 3];
+                case 1: return [4 /*yield*/, handleChartRQ(eachChart.spaceId).call({
+                        type: "list",
+                        query: filterQuery,
+                        aggregate: {
+                            type: "count",
+                            queryId: "_id",
+                            groupId: eachChart.segmentBy,
+                            dateId: (_b = eachChart.queryBaseDateId) !== null && _b !== void 0 ? _b : "baseUpdatedAt",
+                            range: handleSetGraphDateRange(__assign(__assign({}, eachChart), { type: "bar" }), filterRange),
+                            timezone: dayjs_1.default.tz.guess(),
+                        },
+                    })];
+                case 2:
+                    res = _c.sent();
+                    segmentKeys = (0, chartResults_1.handleFlattenGroupedResult)(res === null || res === void 0 ? void 0 : res.data)
+                        .sort(function (first, second) { var _a, _b; return ((_a = second.value) !== null && _a !== void 0 ? _a : 0) - ((_b = first.value) !== null && _b !== void 0 ? _b : 0); })
+                        .slice(0, MAX_SEGMENTS)
+                        .map(function (eachGroup) { return eachGroup.key; });
+                    _c.label = 3;
+                case 3: return [4 /*yield*/, handleResolveGroupLabels(segmentColumn, segmentKeys)];
+                case 4:
+                    labels = _c.sent();
+                    return [4 /*yield*/, Promise.all(segmentKeys.map(function (eachKey) { return __awaiter(_this, void 0, void 0, function () {
+                            var segmentPoints, byKey, running;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, handleRunPoints((0, chartResults_1.handleGroupKeyQuery)(eachChart.segmentBy, eachKey))];
+                                    case 1:
+                                        segmentPoints = _a.sent();
+                                        byKey = new Map(segmentPoints.map(function (eachPoint) {
+                                            var _a;
+                                            return [
+                                                JSON.stringify((_a = eachPoint.key) !== null && _a !== void 0 ? _a : null),
+                                                eachPoint.y,
+                                            ];
+                                        }));
+                                        running = 0;
+                                        return [2 /*return*/, {
+                                                name: (0, chartResults_1.handleGroupKeyLabel)(eachKey, segmentColumn, labels),
+                                                data: points.map(function (eachPoint) {
+                                                    var _a, _b;
+                                                    var value = eachPoint.x === chartResults_1.OTHERS_LABEL
+                                                        ? 0
+                                                        : (_b = byKey.get(JSON.stringify((_a = eachPoint.key) !== null && _a !== void 0 ? _a : null))) !== null && _b !== void 0 ? _b : 0;
+                                                    running += value;
+                                                    return eachChart.cumulative && eachChart.queryDateInterval
+                                                        ? Math.round(running * 100) / 100
+                                                        : value;
+                                                }),
+                                            }];
                                 }
                             });
                         }); }))];
+                case 5:
+                    segments = _c.sent();
+                    // INFO: whatever the capped segments leave of each total
+                    if (eachChart.queryBaseType !== "avg") {
+                        rest = points.map(function (eachPoint, index) {
+                            var covered = segments.reduce(function (sum, eachSegment) { return sum + eachSegment.data[index]; }, 0);
+                            return Math.max(0, Math.round((eachPoint.y - covered) * 100) / 100);
+                        });
+                        if (rest.some(function (each) { return each > 0; }))
+                            segments.push({ name: chartResults_1.OTHERS_LABEL, data: rest });
+                    }
+                    return [2 /*return*/, segments.length ? segments : undefined];
+            }
+        });
+    }); };
+    var handleReadRadar = function (eachChart, filters) { return __awaiter(_this, void 0, void 0, function () {
+        var localData, error, results;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    localData = [];
+                    error = (_a = (0, chartErrors_1.handleCheckChartColumns)(eachChart, props.structure)) !== null && _a !== void 0 ? _a : undefined;
+                    if (error || !eachChart.queryAttributeId)
+                        return [2 /*return*/, { data: localData, error: error }];
+                    eachChart.query.forEach(function (eachQuery) {
+                        localData.push({ id: eachQuery.value, value: [] });
+                    });
+                    return [4 /*yield*/, Promise.all(eachChart.queryAttributeId.map(function (eachAttribute) {
+                            return handleReadGraphDetail(eachChart, filters, eachAttribute);
+                        }))];
                 case 1:
-                    _a.sent();
-                    _a.label = 2;
+                    results = _b.sent();
+                    results.forEach(function (eachResult) {
+                        eachResult.data.forEach(function (eachData, index) {
+                            var _a, _b;
+                            // INFO: a failed request answers one placeholder, not one per query
+                            (_a = localData[index]) === null || _a === void 0 ? void 0 : _a.value.push((_b = (0, chartResults_1.handleToChartNumber)(eachData.value)) !== null && _b !== void 0 ? _b : 0);
+                        });
+                        if (eachResult.error)
+                            error = eachResult.error;
+                    });
+                    return [2 /*return*/, { data: localData, error: error }];
+            }
+        });
+    }); };
+    /**
+     * Loads one chart into state, whichever way it is built. Every path ends in
+     * an error card rather than a throw, so one chart never fails the others.
+     */
+    var handleLoadChart = function (eachChart, filters) { return __awaiter(_this, void 0, void 0, function () {
+        var sequence, data, series, error, columnError, err_4;
+        var _a, _b, _c;
+        var _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
+                case 0:
+                    sequence = ((_d = loadSequenceRef.current[eachChart.title]) !== null && _d !== void 0 ? _d : 0) + 1;
+                    loadSequenceRef.current[eachChart.title] = sequence;
+                    data = undefined;
+                    series = undefined;
+                    error = undefined;
+                    _e.label = 1;
+                case 1:
+                    _e.trys.push([1, 9, , 10]);
+                    if (!(eachChart.type === "radar")) return [3 /*break*/, 3];
+                    return [4 /*yield*/, handleReadRadar(eachChart, filters)];
                 case 2:
-                    setGraphAnalyticsData(graphAnalytics);
-                    setGraphAnalyticsError(graphAnalyticsError);
+                    (_a = _e.sent(), data = _a.data, error = _a.error);
+                    return [3 /*break*/, 8];
+                case 3:
+                    if (!(0, exports.handleIsShapedChart)(eachChart)) return [3 /*break*/, 5];
+                    return [4 /*yield*/, handleReadShapedChart(eachChart, filters)];
+                case 4:
+                    (_b = _e.sent(), series = _b.series, error = _b.error);
+                    return [3 /*break*/, 8];
+                case 5:
+                    columnError = (0, chartErrors_1.handleCheckChartColumns)(eachChart, props.structure);
+                    if (!columnError) return [3 /*break*/, 6];
+                    error = columnError;
+                    return [3 /*break*/, 8];
+                case 6: return [4 /*yield*/, handleReadGraphDetail(eachChart, filters)];
+                case 7:
+                    (_c = _e.sent(), data = _c.data, error = _c.error);
+                    _e.label = 8;
+                case 8: return [3 /*break*/, 10];
+                case 9:
+                    err_4 = _e.sent();
+                    error = (0, chartErrors_1.handleDescribeChartError)(err_4, eachChart);
+                    return [3 /*break*/, 10];
+                case 10:
+                    if (loadSequenceRef.current[eachChart.title] !== sequence)
+                        return [2 /*return*/];
+                    setGraphAnalyticsData(function (prev) {
+                        var _a;
+                        return (__assign(__assign({}, prev), (_a = {}, _a[eachChart.title] = data, _a)));
+                    });
+                    setGraphSeries(function (prev) {
+                        var next = __assign({}, prev);
+                        if (series)
+                            next[eachChart.title] = series;
+                        else
+                            delete next[eachChart.title];
+                        return next;
+                    });
+                    setGraphAnalyticsError(function (prev) {
+                        var _a;
+                        return (__assign(__assign({}, prev), (_a = {}, _a[eachChart.title] = error, _a)));
+                    });
                     return [2 /*return*/];
             }
         });
     }); };
+    var handleGetGraphDetail = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!props.charts)
+                        return [2 /*return*/];
+                    return [4 /*yield*/, Promise.all(props.charts.map(function (eachChart) {
+                            return handleLoadChart(eachChart, graphAnalyticsFilter);
+                        }))];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleRetryChart = function (eachChart) {
+        setRetryCount(function (prev) {
+            var _a;
+            var _b;
+            return (__assign(__assign({}, prev), (_a = {}, _a[eachChart.title] = ((_b = prev[eachChart.title]) !== null && _b !== void 0 ? _b : 0) + 1, _a)));
+        });
+        setGraphAnalyticsError(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[eachChart.title] = undefined, _a)));
+        });
+        handleLoadChart(eachChart, graphAnalyticsFilter);
+    };
     var handleCloneGraphAnalyticsFilter = function () {
         var clonedGraphAnalyticsFilter = JSON.parse(JSON.stringify(graphAnalyticsFilter));
         Object.keys(clonedGraphAnalyticsFilter).map(function (eachKeys) {
@@ -516,6 +897,78 @@ function DataGraph(props) {
             return [2 /*return*/];
         });
     }); };
+    var handleDrillDown = function (eachChart, point) {
+        var _a, _b;
+        if (!props.onDrillDown || !point)
+            return;
+        // INFO: a percentage or running total still opens the records of its own
+        // value, not of everything before it
+        props.onDrillDown({
+            chart: eachChart,
+            label: point.x,
+            query: __spreadArray(__spreadArray(__spreadArray([], ((_a = point.query) !== null && _a !== void 0 ? _a : []), true), handleChartFilterQuery(eachChart, graphAnalyticsFilter), true), (eachChart.queryDateInterval && !eachChart.groupBy
+                ? []
+                : handleDateRangeQuery(eachChart, (_b = graphAnalyticsFilter[eachChart.title]) === null || _b === void 0 ? void 0 : _b.range)), true),
+        });
+    };
+    var handleBuildLegacyPoints = function (eachChart) {
+        var points = [];
+        var selectedChart = eachChart === null || eachChart === void 0 ? void 0 : eachChart.query;
+        var raw = graphAnalyticsData[eachChart.title];
+        if (!Array.isArray(raw))
+            return points;
+        raw.forEach(function (eachData, index) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            var title = eachData._id;
+            var dates = typeof eachData._id === "string" ? eachData._id.split("-") : [];
+            if (dates.length === 2) {
+                var format = "DD/MM/YY";
+                var range = (_b = graphAnalyticsFilter[(_a = eachChart.title) !== null && _a !== void 0 ? _a : ""]) === null || _b === void 0 ? void 0 : _b.range;
+                if (range &&
+                    (0, dayjs_1.default)(range.startDate).isSame((0, dayjs_1.default)(range.endDate), "day")) {
+                    format = "HH:mm";
+                }
+                var startDate = (0, dayjs_1.default)(dates[0], "DD/MM/YYYY HH:mm:ss").format(format);
+                var endDate = (0, dayjs_1.default)(dates[1], "DD/MM/YYYY HH:mm:ss").format(format);
+                title = "".concat(startDate, " - ").concat(endDate);
+            }
+            var seriesLabel = (_c = eachChart.seriesLabels) === null || _c === void 0 ? void 0 : _c[index];
+            if (seriesLabel && eachChart.type !== "line") {
+                title = seriesLabel;
+            }
+            else if (selectedChart &&
+                Array.isArray(selectedChart) &&
+                eachChart.type !== "line") {
+                var queryId = (_e = (_d = selectedChart[index]) === null || _d === void 0 ? void 0 : _d.queryId) !== null && _e !== void 0 ? _e : "";
+                var type = (_g = (_f = selectedChart[index]) === null || _f === void 0 ? void 0 : _f.type) !== null && _g !== void 0 ? _g : "";
+                var value = (_j = (_h = selectedChart[index]) === null || _h === void 0 ? void 0 : _h.value) !== null && _j !== void 0 ? _j : "";
+                title =
+                    queryId && type && value ? "".concat(queryId, " ").concat(type, " ").concat(value) : title;
+            }
+            var query = eachChart.type !== "line" && (selectedChart === null || selectedChart === void 0 ? void 0 : selectedChart[index])
+                ? [selectedChart[index]]
+                : undefined;
+            points.push({
+                x: title === null || title === undefined ? chartResults_1.EMPTY_GROUP_LABEL : String(title),
+                y: (_k = (0, chartResults_1.handleToChartNumber)(eachData.value)) !== null && _k !== void 0 ? _k : 0,
+                key: (_l = selectedChart === null || selectedChart === void 0 ? void 0 : selectedChart[index]) === null || _l === void 0 ? void 0 : _l.value,
+                query: query,
+            });
+        });
+        if (eachChart.type === "line")
+            return points;
+        return (0, chartResults_1.handleShapeChartPoints)(points, {
+            sortBy: eachChart.sortBy,
+            sortDirection: eachChart.sortDirection,
+            topN: eachChart.topN,
+            showOthers: eachChart.showOthers,
+            showPercent: eachChart.showPercent,
+            measure: eachChart.queryBaseType,
+        }).points.map(function (eachPoint) {
+            return eachPoint.x === chartResults_1.OTHERS_LABEL && eachPoint.key === undefined
+                ? __assign(__assign({}, eachPoint), { query: undefined }) : eachPoint;
+        });
+    };
     var renderChartCardIcon = function (spaceIcon, isCompact, emoji) {
         if (emoji)
             return (react_1.default.createElement("span", { "aria-hidden": "true", className: "flex items-center justify-center leading-none ".concat(isCompact ? "h-4 w-4 text-sm" : "h-5 w-5 text-base") }, emoji));
@@ -537,162 +990,173 @@ function DataGraph(props) {
     };
     var renderChartOptionFilter = function (eachChart, index) {
         var _a, _b, _c, _d;
-        if (eachChart) {
-            if (graphAnalyticsError[eachChart.title]) {
-                return (react_1.default.createElement(tag_1.Tag, { tagText: graphAnalyticsError[eachChart.title], size: "small" }));
-            }
-            else {
-                var options = [];
-                if (eachChart && Array.isArray(eachChart.queryAttributeId)) {
-                    options =
-                        (_b = (_a = eachChart === null || eachChart === void 0 ? void 0 : eachChart.queryAttributeId) === null || _a === void 0 ? void 0 : _a.map(function (eachFilter) {
-                            return {
-                                key: eachFilter,
-                                label: eachFilter.charAt(0).toUpperCase() + eachFilter.slice(1),
-                            };
-                        })) !== null && _b !== void 0 ? _b : [];
-                }
-                var isFilter = eachChart.queryAttributeId
-                    ? eachChart.queryAttributeId.length > 0
-                    : false;
-                return (react_1.default.createElement("div", { className: "flex flex-col sm:flex-row gap-2 sm:ml-5 justify-ends" }, isFilter && (react_1.default.createElement(select_1.Select, { label: "", options: options, value: (_d = (_c = graphAnalyticsFilter[eachChart.title]) === null || _c === void 0 ? void 0 : _c.filter) !== null && _d !== void 0 ? _d : (options.length > 0 ? options[0].key : "-"), onChange: function (value) {
-                        handleUpdateChartData(index, value, "filter");
-                    } }))));
-            }
+        if (!eachChart)
+            return null;
+        var options = [];
+        if (eachChart && Array.isArray(eachChart.queryAttributeId)) {
+            options =
+                (_b = (_a = eachChart === null || eachChart === void 0 ? void 0 : eachChart.queryAttributeId) === null || _a === void 0 ? void 0 : _a.map(function (eachFilter) {
+                    var _a;
+                    var column = handleFindColumn(eachFilter);
+                    return {
+                        key: eachFilter,
+                        label: (_a = column === null || column === void 0 ? void 0 : column.name) !== null && _a !== void 0 ? _a : eachFilter.charAt(0).toUpperCase() + eachFilter.slice(1),
+                    };
+                })) !== null && _b !== void 0 ? _b : [];
         }
+        // INFO: one measured column needs no picker — there is nothing to switch to
+        var isFilter = options.length > 1;
+        return (react_1.default.createElement("div", { className: "flex flex-col sm:flex-row gap-2 sm:ml-5 justify-ends" }, isFilter && (react_1.default.createElement(select_1.Select, { label: "", options: options, value: (_d = (_c = graphAnalyticsFilter[eachChart.title]) === null || _c === void 0 ? void 0 : _c.filter) !== null && _d !== void 0 ? _d : (options.length > 0 ? options[0].key : "-"), onChange: function (value) {
+                handleUpdateChartData(index, value, "filter");
+            } }))));
     };
-    var renderChart = function (item, seriesData, index) {
-        var _a, _b, _c, _d;
-        if (graphAnalyticsFilter[(_a = item.title) !== null && _a !== void 0 ? _a : ""] &&
+    var renderChartError = function (item, error, spanClass) {
+        var isOpen = !!detailsOpen[item.title];
+        return (react_1.default.createElement("div", { className: spanClass },
+            react_1.default.createElement("div", { className: "h-full rounded-lg bg-white p-5 shadow", "data-testid": "chart-error" },
+                react_1.default.createElement("p", { className: "text-lg font-medium text-gray-900" }, item.title),
+                react_1.default.createElement("div", { className: "mt-3 flex items-start gap-2" },
+                    react_1.default.createElement(solid_1.ExclamationTriangleIcon, { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-amber-500" }),
+                    react_1.default.createElement("p", { className: "text-sm text-gray-700" }, error.message)),
+                react_1.default.createElement("div", { className: "mt-3 flex items-center gap-4" },
+                    react_1.default.createElement(textButton_1.TextButton, { text: "Retry", onClick: function () { return handleRetryChart(item); } }),
+                    error.details && (react_1.default.createElement(textButton_1.TextButton, { text: isOpen ? "Hide details" : "Details", onClick: function () {
+                            return setDetailsOpen(function (prev) {
+                                var _a;
+                                return (__assign(__assign({}, prev), (_a = {}, _a[item.title] = !isOpen, _a)));
+                            });
+                        } }))),
+                isOpen && error.details && (react_1.default.createElement("p", { className: "mt-2 break-words font-mono text-xs text-gray-500" }, error.details)))));
+    };
+    var renderChart = function (item, points, index, segments) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        var spanClass = (_a = GRID_SPAN_CLASS[item.gridSize]) !== null && _a !== void 0 ? _a : "col-span-1";
+        if (graphAnalyticsFilter[(_b = item.title) !== null && _b !== void 0 ? _b : ""] &&
             graphAnalyticsFilter[item.title].loading) {
-            return (react_1.default.createElement("div", { className: "col-span-".concat(item.gridSize, " flex items-center") },
+            return (react_1.default.createElement("div", { className: "".concat(spanClass, " flex items-center") },
                 react_1.default.createElement(loading_1.Loading, null)));
         }
-        else {
-            var pieSeries_1 = [];
-            var pieLabels_1 = [];
-            seriesData.map(function (eachSeries) {
-                pieLabels_1.push(eachSeries.x);
-                pieSeries_1.push(eachSeries.y);
-                return null;
-            });
-            var customDate = graphAnalyticsFilter[item.title] &&
-                graphAnalyticsFilter[item.title].range
-                ? graphAnalyticsFilter[item.title].range
-                : undefined;
-            return (react_1.default.createElement("div", { className: "col-span-".concat(item.gridSize) },
-                item.type === "card" && (react_1.default.createElement(card_1.Card, { icon: renderChartCardIcon(item.cardIcon, item.cardSize === "compact", item.cardEmoji), iconBgColor: item.cardIconBgColor, size: item.cardSize, title: item.title, description: graphAnalyticsError[item.title]
-                        ? graphAnalyticsError[item.title]
-                        : (_b = item.description) !== null && _b !== void 0 ? _b : "", count: seriesData.length > 0 ? seriesData[0].y : 0, dateRangeVisible: item.queryBaseDateId ? true : false, customDate: customDate, onChangeDate: function (dateRange) {
-                        handleUpdateChartData(index, dateRange);
-                    } })),
-                item.type === "pie" && (react_1.default.createElement(pieChart_1.PieChart, { title: item.title, type: item.pieType, series: pieSeries_1, labels: pieLabels_1, customDate: customDate, tool: renderChartOptionFilter(item, index), colors: item.colors, dateRangeVisible: item.queryBaseDateId ? true : false, onChangeDate: function (dateRange) {
-                        handleUpdateChartData(index, dateRange);
-                    } })),
-                item.type === "bar" && (react_1.default.createElement(barChart_1.BarChart, { title: item.title, seriesName: "Value", seriesData: seriesData, orientation: (_c = item.orientation) !== null && _c !== void 0 ? _c : "row", customDate: customDate, tool: renderChartOptionFilter(item, index), dateRangeVisible: item.queryBaseDateId ? true : false, onChangeDate: function (dateRange) {
-                        handleUpdateChartData(index, dateRange);
-                    }, colors: item.colors, stackedVertical: item.stackedVertical, distributed: item.colors && ((_d = item.colors) === null || _d === void 0 ? void 0 : _d.length) > 0 ? true : false })),
-                item.type === "table" &&
-                    renderTableChart(item, seriesData, index, customDate),
-                item.type === "line" && (react_1.default.createElement(lineChart_1.LineChart, { title: item.title, categories: pieLabels_1, seriesData: pieSeries_1, seriesName: "Value", showDataLabels: true, xaxisTitle: "Date", yaxisTitle: "Value", containerStyle: "mb-10", customDate: customDate, tool: renderChartOptionFilter(item, index), dateRangeVisible: item.queryBaseDateId ? true : false, enableGradient: true, colors: item.colors, onChangeDate: function (dateRange) {
-                        handleUpdateChartData(index, dateRange);
-                    } }))));
-        }
+        var seriesData = points.map(function (eachPoint) { return ({
+            x: eachPoint.x,
+            y: eachPoint.y,
+        }); });
+        var pieSeries = points.map(function (eachPoint) { return eachPoint.y; });
+        var pieLabels = points.map(function (eachPoint) { return eachPoint.x; });
+        var isPercent = !!item.showPercent && !segments;
+        var unit = isPercent ? "%" : undefined;
+        // INFO: a chart bucketed by day, week or month covers a longer default
+        // than the picker's own week, so the picker is told what was counted
+        var customDate = (_d = (_c = graphAnalyticsFilter[item.title]) === null || _c === void 0 ? void 0 : _c.range) !== null && _d !== void 0 ? _d : (item.queryDateInterval && item.queryBaseDateId && !item.groupBy
+            ? handleResolveRange(item)
+            : undefined);
+        var handleClickPoint = function (label) {
+            return handleDrillDown(item, points.find(function (eachPoint) { return eachPoint.x === label; }));
+        };
+        return (react_1.default.createElement("div", { className: spanClass },
+            item.type === "card" && (react_1.default.createElement(card_1.Card, { icon: renderChartCardIcon(item.cardIcon, item.cardSize === "compact", item.cardEmoji), iconBgColor: item.cardIconBgColor, size: item.cardSize, title: item.title, description: (_e = item.description) !== null && _e !== void 0 ? _e : "", count: points.length > 0 ? points[0].y : 0, dateRangeVisible: item.queryBaseDateId ? true : false, customDate: customDate, onChangeDate: function (dateRange) {
+                    handleUpdateChartData(index, dateRange);
+                } })),
+            item.type === "pie" && (react_1.default.createElement(pieChart_1.PieChart, { title: item.title, type: item.pieType, series: pieSeries, labels: pieLabels, customDate: customDate, tool: renderChartOptionFilter(item, index), colors: item.colors, dateRangeVisible: item.queryBaseDateId ? true : false, onChangeDate: function (dateRange) {
+                    handleUpdateChartData(index, dateRange);
+                }, onClick: props.onDrillDown
+                    ? function (pointIndex) {
+                        return handleDrillDown(item, points[pointIndex]);
+                    }
+                    : undefined })),
+            item.type === "bar" && (react_1.default.createElement(barChart_1.BarChart, { title: item.title, seriesName: "Value", seriesUnit: unit, seriesData: segments ? undefined : seriesData, categories: segments ? pieLabels : undefined, stackedBarSeries: segments, orientation: (_f = item.orientation) !== null && _f !== void 0 ? _f : "row", customDate: customDate, tool: renderChartOptionFilter(item, index), dateRangeVisible: item.queryBaseDateId ? true : false, onChangeDate: function (dateRange) {
+                    handleUpdateChartData(index, dateRange);
+                }, colors: item.colors, stackedVertical: segments ? true : item.stackedVertical, distributed: !segments && item.colors && ((_g = item.colors) === null || _g === void 0 ? void 0 : _g.length) > 0
+                    ? true
+                    : false, onClick: props.onDrillDown ? handleClickPoint : undefined })),
+            item.type === "table" &&
+                renderTableChart(item, points, index, customDate, segments),
+            item.type === "line" && (react_1.default.createElement(lineChart_1.LineChart, { title: item.title, categories: pieLabels, seriesData: pieSeries, multiLineSeries: segments, seriesName: "Value", seriesUnit: unit, showDataLabels: true, xaxisTitle: "Date", yaxisTitle: "Value", containerStyle: "mb-10", customDate: customDate, tool: renderChartOptionFilter(item, index), dateRangeVisible: item.queryBaseDateId ? true : false, enableGradient: true, colors: item.colors, onChangeDate: function (dateRange) {
+                    handleUpdateChartData(index, dateRange);
+                } }))));
     };
-    var renderTableChart = function (item, seriesData, index, customDate) {
-        var total = seriesData.reduce(function (sum, eachSeries) { var _a; return sum + Number((_a = eachSeries.y) !== null && _a !== void 0 ? _a : 0); }, 0);
+    var renderTableChart = function (item, points, index, customDate, segments) {
+        var total = points.reduce(function (sum, eachPoint) { return sum + eachPoint.y; }, 0);
         // INFO: a total of averages means nothing, so only count and sum get one
-        var showTotal = item.queryBaseType !== "avg";
+        var showTotal = item.queryBaseType !== "avg" && !item.cumulative;
+        var canDrill = !!props.onDrillDown;
+        var isPercent = !!item.showPercent && !segments;
+        var handleFormat = function (value) {
+            return "".concat(Number.isInteger(value) ? value : value.toFixed(2)).concat(isPercent ? "%" : "");
+        };
         return (react_1.default.createElement("div", { className: "h-full overflow-hidden rounded-lg bg-white p-5 shadow" },
             react_1.default.createElement("p", { className: "mb-3 text-lg font-medium text-gray-900" }, item.title),
-            react_1.default.createElement("table", { className: "min-w-full divide-y divide-gray-200 text-sm" },
-                react_1.default.createElement("tbody", { className: "divide-y divide-gray-100" }, seriesData.map(function (eachSeries) { return (react_1.default.createElement("tr", { key: eachSeries.x },
-                    react_1.default.createElement("td", { className: "py-2 pr-4 text-gray-600" }, eachSeries.x),
-                    react_1.default.createElement("td", { className: "py-2 text-right font-medium text-gray-900" }, eachSeries.y))); })),
-                showTotal && (react_1.default.createElement("tfoot", null,
-                    react_1.default.createElement("tr", { className: "border-t border-gray-300" },
-                        react_1.default.createElement("td", { className: "py-2 pr-4 font-semibold text-gray-900" }, "Total"),
-                        react_1.default.createElement("td", { className: "py-2 text-right font-semibold text-gray-900" }, Number(total) % 1 !== 0 ? total.toFixed(2) : total))))),
+            react_1.default.createElement("div", { className: "overflow-x-auto" },
+                react_1.default.createElement("table", { className: "min-w-full divide-y divide-gray-200 text-sm" },
+                    segments && (react_1.default.createElement("thead", null,
+                        react_1.default.createElement("tr", null,
+                            react_1.default.createElement("th", null),
+                            segments.map(function (eachSegment) { return (react_1.default.createElement("th", { key: eachSegment.name, className: "py-2 pl-4 text-right font-medium text-gray-500" }, eachSegment.name)); }),
+                            react_1.default.createElement("th", { className: "py-2 pl-4 text-right font-medium text-gray-500" }, "Total")))),
+                    react_1.default.createElement("tbody", { className: "divide-y divide-gray-100" }, points.map(function (eachPoint, pointIndex) { return (react_1.default.createElement("tr", { key: "".concat(pointIndex, "-").concat(eachPoint.x), className: canDrill && eachPoint.query
+                            ? "cursor-pointer hover:bg-gray-50"
+                            : "", onClick: function () {
+                            return eachPoint.query && handleDrillDown(item, eachPoint);
+                        } },
+                        react_1.default.createElement("td", { className: "py-2 pr-4 text-gray-600" }, eachPoint.x), segments === null || segments === void 0 ? void 0 :
+                        segments.map(function (eachSegment) {
+                            var _a;
+                            return (react_1.default.createElement("td", { key: eachSegment.name, className: "py-2 pl-4 text-right text-gray-700" }, handleFormat((_a = eachSegment.data[pointIndex]) !== null && _a !== void 0 ? _a : 0)));
+                        }),
+                        react_1.default.createElement("td", { className: "py-2 pl-4 text-right font-medium text-gray-900" }, handleFormat(eachPoint.y)))); })),
+                    showTotal && !isPercent && (react_1.default.createElement("tfoot", null,
+                        react_1.default.createElement("tr", { className: "border-t border-gray-300" },
+                            react_1.default.createElement("td", { className: "py-2 pr-4 font-semibold text-gray-900" }, "Total"), segments === null || segments === void 0 ? void 0 :
+                            segments.map(function (eachSegment) { return (react_1.default.createElement("td", { key: eachSegment.name, className: "py-2 pl-4 text-right font-semibold text-gray-900" }, handleFormat(eachSegment.data.reduce(function (sum, each) { return sum + each; }, 0)))); }),
+                            react_1.default.createElement("td", { className: "py-2 pl-4 text-right font-semibold text-gray-900" }, handleFormat(Math.round(total * 100) / 100))))))),
             item.queryBaseDateId && (react_1.default.createElement(DateRange_1.DateRange, { customDate: customDate, onChangeDate: function (dateRange) {
                     handleUpdateChartData(index, dateRange);
                 }, className: "mt-3" }))));
     };
     var renderRadarChart = function (item, index) {
-        var _a;
+        var _a, _b;
+        var spanClass = (_a = GRID_SPAN_CLASS[item.gridSize]) !== null && _a !== void 0 ? _a : "col-span-1";
         if (!graphAnalyticsData[item.title]) {
-            return (react_1.default.createElement("div", { className: "col-span-".concat(item.gridSize, " flex items-center") },
+            return (react_1.default.createElement("div", { className: "".concat(spanClass, " flex items-center") },
                 react_1.default.createElement(loading_1.Loading, null)));
         }
-        else {
-            var radarData_1 = [];
-            var seriesData = graphAnalyticsData[item.title];
-            seriesData.map(function (eachData) {
-                radarData_1.push({
-                    name: eachData.id,
-                    data: Array.isArray(eachData.value)
-                        ? eachData.value
-                        : [eachData.value],
-                });
-                return null;
+        var radarData = [];
+        graphAnalyticsData[item.title].forEach(function (eachData) {
+            radarData.push({
+                name: eachData.id,
+                data: Array.isArray(eachData.value) ? eachData.value : [eachData.value],
             });
-            return (react_1.default.createElement("div", { className: "col-span-".concat(item.gridSize) }, item.type === "radar" && (react_1.default.createElement(radarChart_1.RadarChart, { title: item.title, data: radarData_1, labels: (_a = item.queryAttributeId) !== null && _a !== void 0 ? _a : [], dateRangeVisible: item.queryBaseDateId ? true : false, onChangeDate: function (dateRange) {
+        });
+        var labels = ((_b = item.queryAttributeId) !== null && _b !== void 0 ? _b : []).map(function (eachAttribute) { var _a, _b; return (_b = (_a = handleFindColumn(eachAttribute)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : eachAttribute; });
+        return (react_1.default.createElement("div", { className: spanClass },
+            react_1.default.createElement(radarChart_1.RadarChart, { title: item.title, data: radarData, labels: labels, dateRangeVisible: item.queryBaseDateId ? true : false, onChangeDate: function (dateRange) {
                     handleUpdateChartData(index, dateRange);
-                }, showLegend: true }))));
+                }, showLegend: true })));
+    };
+    var renderEachChart = function (eachChart, index) {
+        var _a;
+        var spanClass = (_a = GRID_SPAN_CLASS[eachChart.gridSize]) !== null && _a !== void 0 ? _a : "col-span-1";
+        var error = graphAnalyticsError[eachChart.title];
+        if (error)
+            return renderChartError(eachChart, error, spanClass);
+        if (eachChart.type === "radar")
+            return renderRadarChart(eachChart, index);
+        if ((0, exports.handleIsShapedChart)(eachChart)) {
+            var series = graphSeries[eachChart.title];
+            if (!series)
+                return (react_1.default.createElement("div", { className: "".concat(spanClass, " flex items-center") },
+                    react_1.default.createElement(loading_1.Loading, null)));
+            return renderChart(eachChart, series.points, index, series.segments);
         }
+        return renderChart(eachChart, handleBuildLegacyPoints(eachChart), index);
     };
     var renderCharts = function () {
         var _a;
         return (react_1.default.createElement(react_1.default.Fragment, null, (_a = props.charts) === null || _a === void 0 ? void 0 : _a.map(function (eachChart, index) {
-            if (eachChart.type !== "radar") {
-                var seriesData_1 = [];
-                var selectedChart_1 = eachChart === null || eachChart === void 0 ? void 0 : eachChart.query;
-                if (Array.isArray(graphAnalyticsData[eachChart.title])) {
-                    graphAnalyticsData[eachChart.title].map(function (eachData, index) {
-                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-                        var title = eachData._id;
-                        var dates = (_b = (_a = eachData._id) === null || _a === void 0 ? void 0 : _a.split("-")) !== null && _b !== void 0 ? _b : [];
-                        if (dates.length === 2) {
-                            var format = "DD/MM/YY";
-                            if (graphAnalyticsFilter[(_c = eachChart.title) !== null && _c !== void 0 ? _c : ""] &&
-                                graphAnalyticsFilter[(_d = eachChart.title) !== null && _d !== void 0 ? _d : ""].range &&
-                                (0, dayjs_1.default)(graphAnalyticsFilter[(_e = eachChart.title) !== null && _e !== void 0 ? _e : ""].range
-                                    .startDate).isSame((0, dayjs_1.default)(graphAnalyticsFilter[(_f = eachChart.title) !== null && _f !== void 0 ? _f : ""].range
-                                    .endDate), "day")) {
-                                format = "HH:mm";
-                            }
-                            var startDate = (0, dayjs_1.default)(dates[0], "DD/MM/YYYY HH:mm:ss").format(format);
-                            var endDate = (0, dayjs_1.default)(dates[1], "DD/MM/YYYY HH:mm:ss").format(format);
-                            title = "".concat(startDate, " - ").concat(endDate);
-                        }
-                        var seriesLabel = (_g = eachChart.seriesLabels) === null || _g === void 0 ? void 0 : _g[index];
-                        if (seriesLabel && eachChart.type !== "line") {
-                            title = seriesLabel;
-                        }
-                        else if (selectedChart_1 &&
-                            Array.isArray(selectedChart_1) &&
-                            eachChart.type !== "line") {
-                            var queryId = (_j = (_h = selectedChart_1[index]) === null || _h === void 0 ? void 0 : _h.queryId) !== null && _j !== void 0 ? _j : "";
-                            var type = (_l = (_k = selectedChart_1[index]) === null || _k === void 0 ? void 0 : _k.type) !== null && _l !== void 0 ? _l : "";
-                            var value = (_o = (_m = selectedChart_1[index]) === null || _m === void 0 ? void 0 : _m.value) !== null && _o !== void 0 ? _o : "";
-                            title =
-                                queryId && type && value
-                                    ? "".concat(queryId, " ").concat(type, " ").concat(value)
-                                    : title;
-                        }
-                        seriesData_1.push({
-                            x: title,
-                            y: Number(eachData.value) % 1 !== 0
-                                ? Number(eachData.value).toFixed(2)
-                                : eachData.value,
-                        });
-                        return null;
-                    });
-                }
-                return renderChart(eachChart, seriesData_1, index);
-            }
-            else {
-                return renderRadarChart(eachChart, index);
-            }
+            var _a;
+            return (react_1.default.createElement(chartErrorBoundary_1.ChartErrorBoundary, { key: "".concat(index, "-").concat(eachChart.title), resetKey: "".concat((_a = retryCount[eachChart.title]) !== null && _a !== void 0 ? _a : 0, "-").concat(JSON.stringify(eachChart)), renderFallback: function (drawError) {
+                    var _a;
+                    return renderChartError(eachChart, { message: chartErrors_1.CHART_DRAW_FAILED, details: drawError.message }, (_a = GRID_SPAN_CLASS[eachChart.gridSize]) !== null && _a !== void 0 ? _a : "col-span-1");
+                } }, renderEachChart(eachChart, index)));
         })));
     };
     var gridSize = "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";