@nteract/data-explorer
Version:
Transform for data resource JSON
86 lines (85 loc) • 4.66 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.semioticSummaryChart = void 0;
const d3_scale_1 = require("d3-scale");
const React = __importStar(require("react"));
const HTMLLegend_1 = __importDefault(require("../components/HTMLLegend"));
const tooltip_content_1 = __importStar(require("../utilities/tooltip-content"));
const utilities_1 = require("../utilities/utilities");
const shared_1 = require("./shared");
const fontScale = d3_scale_1.scaleLinear().domain([8, 25]).range([14, 8]).clamp(true);
exports.semioticSummaryChart = (data, schema, options, colorHashOverride, colorDimOverride) => {
const additionalSettings = {};
const colorHash = colorHashOverride || {};
const { chart, summaryType, primaryKey, colors, setColor, showLegend } = options;
const { dim1, metric1 } = chart;
const oAccessor = dim1;
const rAccessor = metric1;
const uniqueValues = dim1 === "none" ? [] : shared_1.getUniqueValues(data, dim1);
if (!colorHashOverride && dim1 && dim1 !== "none") {
uniqueValues.sort().forEach((dimValue, index) => {
colorHash[dimValue] = colors[index % colors.length];
});
if (showLegend) {
additionalSettings.afterElements = (React.createElement(HTMLLegend_1.default, { valueHash: {}, colorHash: colorHash, setColor: setColor, colors: colors }));
}
}
const summarySettings = Object.assign({ summaryType: { type: summaryType, bins: 16, amplitude: 20 }, type: summaryType === "violin" && data.length < 250 && "swarm", projection: "horizontal", data,
oAccessor,
rAccessor, summaryStyle: (summaryDatapoint) => ({
fill: colorHash[summaryDatapoint[colorDimOverride || dim1]] || colors[0],
fillOpacity: 0.8,
stroke: colorHash[summaryDatapoint[colorDimOverride || dim1]] || colors[0],
}), style: (pieceDatapoint) => ({
fill: colorHash[pieceDatapoint[colorDimOverride || dim1]] || colors[0],
stroke: "white",
}), oPadding: 5, oLabel: uniqueValues.length > 30
? false
: (columnName) => (React.createElement("text", { textAnchor: "end", fontSize: `${(columnName && fontScale(columnName.length)) || 12}px` }, columnName)), margin: { top: 25, right: 10, bottom: 50, left: 100 }, axes: [
{
orient: "bottom",
label: rAccessor,
tickFormat: utilities_1.numeralFormatting,
},
], baseMarkProps: { forceUpdate: true }, pieceHoverAnnotation: summaryType === "violin", tooltipContent: (hoveredDatapoint) => {
const dimensions = options.dimensions.filter((dim) => dim.name !== dim1);
const furtherDims = dimensions.map((dim) => (React.createElement("p", null,
dim.name,
": ",
tooltip_content_1.safeDisplayValue(hoveredDatapoint[dim.name]))));
return (React.createElement(tooltip_content_1.default, { x: hoveredDatapoint.x, y: hoveredDatapoint.y },
React.createElement("h3", null, primaryKey.map((pkey) => hoveredDatapoint[pkey]).join(", ")),
React.createElement("p", null,
dim1,
": ",
tooltip_content_1.safeDisplayValue(hoveredDatapoint[dim1])),
furtherDims,
React.createElement("p", null,
rAccessor,
": ",
tooltip_content_1.safeDisplayValue(hoveredDatapoint[rAccessor]))));
} }, additionalSettings);
return { frameSettings: summarySettings, colorDim: dim1, colorHash };
};