@springernature/nn-charts
Version:
Visualization for DAS products
382 lines (377 loc) • 14.8 kB
JavaScript
;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.cf = void 0;
var d3 = _interopRequireWildcard(require("d3"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var cf = exports.cf = {
// LU to define visible axis titles on chart
axisTitlesLU: {
articlesCount: "NUMBER OF PUBLICATIONS",
totalArticles3Years: "Scholarly Output in Last 3 Years",
orgTotalCitations: "NUMBER OF CITATIONS",
orgRecentCitations: "Number of Citations in Last 3 Years"
},
selectedContinents: [],
// initialisation of array to store continents selected by user in
// proxyContinentLU: [
// { text: "Africa", value: "Africa" },
// { text: "Antartica", value: "Antartica" },
// { text: "Asia", value: "Asia" },
// { text: "Australia", value: "Australia" },
// { text: "Europe", value: "Europe" },
// { text: "North America", value: "North America" },
// { text: "South America", value: "South America" },
// ],
selectedCountries: [],
// initialisation of array to store countries selected by user in
displayTopNEntities: 50,
// arbitrary value to display Top N entities sorted by sort attribute.
maxNSelectedEntities: 350,
// only needed in prototype to limit number of entities listed and displayed in selection list (full topi cdata test set too large)
entitySelectionListSortOrder: "institutionName",
// data attribute field to sort individual entity selection list on (as alphabetical)
dataPointBoundaries: [],
// initialisation of array to store boundary extents for selected and all entities.
// needed to test positioning and update of quadrant labels.
quadrantLabels: {
axisSet: 0,
//iniitalise to define which axis set to use and display against on load.
verticalOffset: 10,
// array containing text strings for displaying on quadrant labels/ Order is aligned with order of 'axisSwitchSets' array
labels: [["High Citations & Low Output", "High Citations & High Output", "Low Citations & Low Output", "Low Citations & High Output"], ["High Citations & Low Output in Last 3 Years", "High Citations & High Output in Last 3 Years", "Low Citations & Low Output in Last 3 Years", "Low Citations & High Output in Last 3 Years"]]
},
// array containing information to allow user to switch axis sets used to plot data point entities against.
axisSwitchSets: [{
x: "articlesCount",
y: "orgTotalCitations",
text: "Total Articles Count versus Total Citation Count",
value: 0,
selected: true
}, {
x: "totalArticles3Years",
y: "orgRecentCitations",
text: "Articles In Last 3 Years versus Citations In Last 3 Years",
value: 1,
selected: false
}],
// proxy array to populate selection list to demonstrate changing data attribute data circles are scaled/sized by
nodeScalingAttributes: [{
r: "orgFieldCitationRatio",
text: "Mean Citation Ratio",
value: 0,
selected: true
}, {
r: "orgRelatedCitationRatio",
text: "Mean Recent Citation Ratio",
value: 1,
selected: false
}],
/* data field in input data used to scale circles by */
circleRadiusAttributeField: "orgFieldCitationRatio",
chartType: "scatterBubble",
// do not change.
baseContainerDiv: ["visualisation-panel", "css-1etwqj"],
// do not change.
svg__chart__container: "base-panel",
// do not change.
baseGroupSVGChartContainer: "group__svg__chart__container",
// do not change.
baseSVGChartGroupElement: "group__svg__chart",
// do not change.
// do not change.
baseGroupForDataElements: {
classNames: ["group__chart__content"],
ariaLabel: "Data",
role: "list"
},
// test data (srcData.data:[] held in seperate data .JS file due to size)
srcData: {
data: [],
// mock up of JSON loading column array
columns: ["topicId", "assetId", "institutionId", "institutionName", "country", "typeOfInstitution", "articlesCount", "totalResearcherCount", "totalArticles3Years", "orgTotalCitations", "orgFieldCitationRatio", "orgRelatedCitationRatio", "orgRecentCitations", "data", "created_nn"]
},
chart__TabTitle: "Competitor Analysis/Topic Benchmarking",
/* data field names within loaded JSON file to read data from, to build chart */
fieldTitles: {
x: "articlesCount" /* "Total Number of Articles" */,
y: "orgTotalCitations" /* "Total Number of Citations" */
},
// axis attribution and styling.
axis: {
x: {
axisRounding: 20,
referenceLines: ["dynamic-to-boundingRect" /* "dynamic-to-axis" "dynamic-to-boundingRect", */] /* values to position reference lines attached to x-axis */,
axisTickFrequency: 1,
// tick frequency for x-axis
role: "presentation",
ariaHidden: true,
position: "bottom" /* "top" */,
/* classNames: ["svg__axis", "svg__axis__x", "svg__axis__x__linear"], */
classNames: ["axis", "x-axis"],
gridLines: {
enable: true /* false */
},
tick: {
role: "presentation",
ariaHidden: false,
line: {
role: "presentation",
ariaHidden: false
},
text: {
role: "presentation",
ariaHidden: false
}
},
title: {
enable: true,
buffer: 20,
dy: "0.5rem",
role: "presentation",
ariaHidden: true,
text: "Scholarly Output",
orientation: "horizontal" /* "vertical" */,
fill: "none",
stroke: "#d8d8d8",
strokeWidth: 0.5,
axisOffset: -70 /* vertically orientated defintion, at axis */,
rotation: 270,
textAnchor: "middle"
}
},
y: {
/* value to round y-axis domain extent to */
axisRounding: 500,
referenceLines: ["dynamic-to-boundingRect" /* "dynamic-to-boundingRect", "dynamic-to-axis" */] /* values to position reference lines attached to y-axis */,
role: "presentation",
ariaHidden: false,
axisTickFrequency: 1,
// tick frequency for y-axis
position: "left" /* right */,
/* classNames: ["svg__axis", "svg__axis__y", "svg__axis__y__linear"], */
classNames: ["axis", "y-axis"],
gridLines: {
enable: true /* false */ // Display chart grid lines on axis
},
tick: {
role: "presentation",
ariaHidden: true /* false */,
line: {
role: "presentation",
ariaHidden: false
},
text: {
role: "presentation",
ariaHidden: true /* false */
}
},
title: {
enable: true /* false */,
// Display axis title
// define text for chart y-axis title.
text: "Number of Citations",
buffer: 20,
dy: "-1rem",
role: "presentation",
ariaHidden: true
}
}
},
// true - if voronoi user interaction layer is needed (default, as most probably needed)
// false - if no voronoi user interaction layer is needed
voronoiBoundaryLayer: false,
delaunayLimitedRadius: 25,
// this vaue seems to work well. Needed to sucessfully implement Delaunay Interactio Layer
maxScalingValue: -1,
// initialisation for var to hold maximum attribute value used to scale circles by
CategoryField: "continent" /* field to use to categorize, style and map data points against */,
dataObjectIdentifier: "institutionId" /* "entityIdentifier" */,
// data field to provide UID for interacted data point
dataObjectLabel: "continent" /* "Countries" */,
// data field to provide label for interacted data point
/* physical height of the whole chart (excluding main title, standFirst and nature copyright logo */
containerHeight: 850,
svg__chart__container_position: {
x: 50,
y: 0
},
group__svg__chart__container_position: {
x: 50,
y: 0
},
/* main margins to chart; chartMargin.left defines space within which y-axis labels are wrapped within */
chartMargin: {
top: 25,
bottom: 65,
left: 95,
right: 50
},
translateExtentBuffer: 500,
chartSpecificAdjustment: 0,
legend: {
gapToLegends: {
x: 50,
y: 10
},
noteLegend: {
hasLegend: true /* false */,
text: {
text: "Node size represents field citation impact",
x: 35,
y: 25
},
background: {
height: 40,
paddingRight: 10
}
},
categoryLegend: {
hasLegend: true /* false */,
text: {
text: "LEGENDS",
x: 15,
y: 27.5,
categoryVerticalSpacing: 30
},
background: {
paddingRight: 10,
paddingBottom: 10
},
// define legend category colours to display on legend and to style circles on chart.
// these are required to be in the same order as array "chartLegendRangeCategoryLabels"
// original order, inline with NB figma design
// legendCategoryColours: [
// ["Orange", "#DD524C", "circle"],
// ["Red", "#AE2D5D", "circle"],
// ["Lilac", "#7681FC", "circle"],
// ["Dark Blue", "#4652CE", "circle"],
// ["Purple", "#7132B6", "circle"],
// ["Dark Green", "#167B7D", "circle"],
// ["Light Blue", "#25ACAC", "circle"],
// ],
// alphabetical order, to artifically remove bias and inference of priority order.
legendCategoryColours: [{
aria: "Orange",
fill: "#DD524C",
stroke: "#DD524C",
symbol: "circle"
}, {
aria: "Red",
fill: "#AE2D5D",
stroke: "#AE2D5D",
symbol: "circle"
}, {
aria: "Lilac",
fill: "#7681FC",
stroke: "#7681FC",
symbol: "circle"
}, {
aria: "Dark Blue",
fill: "#4652CE",
stroke: "#4652CE",
symbol: "circle"
}, {
aria: "Purple",
fill: "#7132B6",
stroke: "#7132B6",
symbol: "circle"
}, {
aria: "Dark Green",
fill: "#167B7D",
stroke: "#167B7D",
symbol: "circle"
}, {
aria: "Light Blue",
fill: "#25ACAC",
stroke: "#25ACAC",
symbol: "circle"
}, {
aria: "Black",
fill: "#000000",
fillOpacity: 0,
stroke: "#FFFFFF",
symbol: "square"
}, {
aria: "Purple",
fill: "#ff00ff",
fillOpacity: 0.1,
stroke: "#ff00ff",
symbol: "square"
}],
symbols: {
circle: d3.symbolCircle,
cross: d3.symbolCross,
diamond: d3.symbolDiamond,
square: d3.symbolSquare,
star: d3.symbolStar,
triangle: d3.symbolTriangle,
wye: d3.symbolWye
}
},
scaleLegend: {
verticalOffset: 0,
// new for dynamic scale legend
numberLegendSteps: 4,
// number of individual circles to display on legend // new for dynamic scale legend
numDecimalPlaces: 0 /* 2 */,
// NUmber decimal places to display scale legend labels with // new for dynamic scale legend
scaleLegendSizes: [],
// new definition for dynamic scale legend
scaledLegendLabelsRounding: 10,
// roubnd label up to nearest N ...
circleRadiusScaleRange: [0, 50],
// increased largest circle size ...
lineLength: 90,
label: 'Node size: Field Citation Ratio (FCR)',
hasLegend: true,
background: {
paddingTop: 15,
paddingLeft: 15,
paddingRight: 15,
paddingBottom: 15
}
}
},
/* variable initialisation to store current colour to programmatically fill data circles with as they are appended to the chart */
circleFillColour: null,
// initialisation of var to store colour to fill data circle.
containerWidth: 750,
chartAxisTitleGappage: 20,
// do not change. needed to add necessary styling gap between axis title and axis content (labels, ticks, domain line); legacy of NI Data Vis Chart Lib.
yAxisTitleYCoordinate: -62,
// do not change.
data: [],
previousXAxisTitleState: null,
// legacy of NI Data Vis Chart Lib. Probably not needed for this visual.
/* empty array initialisation to dynamically and programmatically fill with Voronoi polygon vertex coordinates */
dataVertices: [],
// used to store [x,y] data point coordinates once plotted. Needed to build and implement Delaunay interaction layer
isHovered: false,
// NEEDED : defines if node has been hovered. Legacy code from NI Data Vis Library project.
isClicked: false,
// NEEDED : defines if node has been clicked. Legacy code from NI Data Vis Library project.
// horizontalWidthAdjustment: 5,
// verticalHeightAdjustment: 100,
chartTransitionEaseMethod: d3.easeLinear /* transition ease method */,
chartTransitionDuration: 750 /* transition rate, in milliseconds, between different datasets */,
newX: null,
// to store new complete definition of x-axis domain/range
newY: null,
// to store new complete definition of y-axis domain/range
// zoomedSelectedEntities: false, // NOT NEEDED
currentTransform: [],
// NEEDED: global vaar to store current zoom transform (t = {x, y, k})
currentxAxisDomain: [],
// to store and pass around current x axis domain to help with zoom/pan
currentyAxisDomain: [],
// to store and pass around current y axis domain to help with zoom/pan
nodeLabelField: "institutionName",
// data field name to use for displaying on-chart node labels when below suitable zoom level
nodeSubLabelsField: ['continent', 'country'],
// data field names to use for displaying on-chart node sub labels when below suitable zoom level
zoomThresholdLabelDisplay: 2.5 // zoom level defined at which point node labels are displayed/hidden on zoom in/out
};