Skip to content

Commit

Permalink
[FE-18087] Raster chart re-render reverts legend sorting (#687)
Browse files Browse the repository at this point in the history 
sort domain on update, tweak init state logic
  • Loading branch information
@cjvil
cjvil authored Jan 6, 2025
1 parent 5046956 commit f7e0de7
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 23 deletions.
45 changes: 29 additions & 16 deletions dist/charting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60821,6 +60821,7 @@ var LatLonPolyLine = /*#__PURE__*/function (_Draw$PolyLine) {

"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LEGEND_POSITIONS; });
/* unused harmony export SORT_DIRECTION */
/* harmony export (immutable) */ __webpack_exports__["b"] = getLegendStateFromChart;
/* harmony export (immutable) */ __webpack_exports__["h"] = handleLegendToggle;
/* harmony export (immutable) */ __webpack_exports__["g"] = handleLegendSort;
Expand Down Expand Up @@ -60864,6 +60865,10 @@ var LEGEND_POSITIONS = {
TOP_RIGHT: "top-right",
BOTTOM_LEFT: "bottom-left"
};
var SORT_DIRECTION = {
ASCENDING: "asc",
DESCENDING: "desc"
};
var OTHER_KEY = "Other";
var hasLegendOpenProp = function hasLegendOpenProp(color) {
return _typeof(color.legend) === "object" && color.legend.hasOwnProperty("open");
Expand Down Expand Up @@ -60988,6 +60993,11 @@ function getUpdatedDomainRange(newDomain, oldDomain, range, defaultColor) {
newRange: _toConsumableArray(newDomainRange.values())
};
}
var sortDomain = function sortDomain(sortDirection, domain) {
return domain.sort(function (a, b) {
return sortDirection === SORT_DIRECTION.ASCENDING ? a.localeCompare(b) : b.localeCompare(a);
});
};
function getLegendStateFromChart(_x4, _x5, _x6) {
return _getLegendStateFromChart.apply(this, arguments);
}
Expand Down Expand Up @@ -61054,7 +61064,7 @@ function _getLegendStateFromChart() {
color = layer.getState().encoding.color;
color_legend_descriptor = null;
if (!((layers.length > 1 || __WEBPACK_IMPORTED_MODULE_0_lodash__["isEqual"](selectedLayer, layerState)) && typeof color !== "undefined")) {
_context2.next = 39;
_context2.next = 40;
break;
}
if (!(_typeof(color.scale) === "object" && color.scale.domain === "auto")) {
Expand All @@ -61066,7 +61076,7 @@ function _getLegendStateFromChart() {
domain: layer.colorDomain()
})
});
_context2.next = 37;
_context2.next = 38;
break;
case 21:
if (!(typeof color.scale === "undefined" && color.domain === "auto")) {
Expand All @@ -61076,17 +61086,20 @@ function _getLegendStateFromChart() {
color_legend_descriptor = _objectSpread(_objectSpread({}, color), {}, {
domain: layer.colorDomain()
});
_context2.next = 37;
_context2.next = 38;
break;
case 25:
if (!(color.type === "ordinal")) {
_context2.next = 36;
_context2.next = 37;
break;
}
_context2.next = 28;
return getTopValues(layer, layer_name, color.domain.length);
case 28:
colValues = _context2.sent;
if (color.sorted) {
colValues = sortDomain(color.sorted, colValues);
}
_ref4 = colValues ? getUpdatedDomainRange(colValues, color.domain, color.range, color.defaultOtherRange) : {}, newDomain = _ref4.newDomain, newRange = _ref4.newRange; // don't show the other category when new domain is smaller than original max
color.otherActive = false;
if (!color.hideOther && newDomain.length < color.domain.length) {
Expand All @@ -61104,20 +61117,20 @@ function _getLegendStateFromChart() {
domain: newDomain,
range: newRange
}) : _objectSpread({}, color);
_context2.next = 37;
_context2.next = 38;
break;
case 36:
color_legend_descriptor = _objectSpread({}, color);
case 37:
_context2.next = 40;
break;
case 39:
color_legend_descriptor = _objectSpread({}, color);
case 38:
_context2.next = 41;
break;
case 40:
color_legend_descriptor = _objectSpread({}, color);
case 41:
return _context2.abrupt("return", _objectSpread(_objectSpread({}, color_legend_descriptor), {}, {
version: 1.0
}));
case 41:
case 42:
case "end":
return _context2.stop();
}
Expand Down Expand Up @@ -61177,12 +61190,12 @@ function handleLegendSort() {
otherActive = color.otherActive;
var currentDomain = filteredDomain !== null && filteredDomain !== void 0 ? filteredDomain : domain;
var currentRange = filteredRange !== null && filteredRange !== void 0 ? filteredRange : range;
var sortedDomain = currentDomain.filter(function (d) {

// Toggle sort order, or set to ascending initially
color.sorted = sorted === SORT_DIRECTION.DESCENDING || !sorted ? SORT_DIRECTION.ASCENDING : SORT_DIRECTION.DESCENDING;
var sortedDomain = sortDomain(color.sorted, currentDomain.filter(function (d) {
return d !== OTHER_KEY;
}).sort(function (a, b) {
return sorted === "asc" ? b.localeCompare(a) : a.localeCompare(b);
});
color.sorted = sorted === "asc" ? "desc" : "asc";
}));
var _getUpdatedDomainRang = getUpdatedDomainRange(sortedDomain, currentDomain, currentRange, defaultOtherRange),
newDomain = _getUpdatedDomainRang.newDomain,
newRange = _getUpdatedDomainRang.newRange;
Expand Down
26 changes: 19 additions & 7 deletions src/chart-addons/stacked-legend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ export const LEGEND_POSITIONS = {
BOTTOM_LEFT: "bottom-left"
}

export const SORT_DIRECTION = {
ASCENDING: "asc",
DESCENDING: "desc"
}

const OTHER_KEY = "Other"

const hasLegendOpenProp = color =>
Expand Down Expand Up @@ -131,6 +136,10 @@ function getUpdatedDomainRange(newDomain, oldDomain, range, defaultColor) {
}
}

const sortDomain = (sortDirection, domain) => domain.sort((a, b) =>
sortDirection === SORT_DIRECTION.ASCENDING ? a.localeCompare(b) : b.localeCompare(a)
)

export async function getLegendStateFromChart(chart, useMap, selectedLayer) {
// the getLegendStateFromChart in _doRender gets called from few different options
// and some of them are calling with all layers in chart.
Expand Down Expand Up @@ -211,11 +220,16 @@ export async function getLegendStateFromChart(chart, useMap, selectedLayer) {
domain: layer.colorDomain()
}
} else if (color.type === "ordinal") {
const colValues = await getTopValues(
let colValues = await getTopValues(
layer,
layer_name,
color.domain.length
)

if (color.sorted) {
colValues = sortDomain(color.sorted, colValues)
}

const { newDomain, newRange } = colValues
? getUpdatedDomainRange(
colValues,
Expand Down Expand Up @@ -301,13 +315,11 @@ export function handleLegendSort(index = 0) {
const currentDomain = filteredDomain ?? domain
const currentRange = filteredRange ?? range

const sortedDomain = currentDomain
.filter(d => d !== OTHER_KEY)
.sort((a, b) =>
sorted === "asc" ? b.localeCompare(a) : a.localeCompare(b)
)
// Toggle sort order, or set to ascending initially
color.sorted = sorted === SORT_DIRECTION.DESCENDING || !sorted ? SORT_DIRECTION.ASCENDING : SORT_DIRECTION.DESCENDING

color.sorted = sorted === "asc" ? "desc" : "asc"
const sortedDomain = sortDomain(color.sorted, currentDomain
.filter(d => d !== OTHER_KEY))

const { newDomain, newRange } = getUpdatedDomainRange(
sortedDomain,
Expand Down

0 comments on commit f7e0de7

Please sign in to comment.