diff --git a/src/client/components/facet_results/ApexChart.js b/src/client/components/facet_results/ApexChart.js index b09a7023dfc396837b7059a5572ee5e0b218933b..36de78cad71f1fde7c61512050c83ec1faf6722a 100644 --- a/src/client/components/facet_results/ApexChart.js +++ b/src/client/components/facet_results/ApexChart.js @@ -95,6 +95,7 @@ class ApexChart extends React.Component { xaxisTickAmount: this.props.xaxisTickAmount || null, xaxisLabels: this.props.xaxisLabels || null, stroke: this.props.stroke || null, + fill: this.props.fill || null, tooltip: this.props.tooltip || null }) ) diff --git a/src/client/components/perspectives/sampo/Perspective1.js b/src/client/components/perspectives/sampo/Perspective1.js index 821f164a4762cd239759a3938fbab3aa3c07f373..0e069d3cc5434865a1682a5db68e7e8a6b2106bb 100644 --- a/src/client/components/perspectives/sampo/Perspective1.js +++ b/src/client/components/perspectives/sampo/Perspective1.js @@ -300,6 +300,16 @@ const Perspective1 = props => { curve: 'straight', width: 2 }} + fill={{ + type: 'gradient', + gradient: { + shadeIntensity: 1, + inverseColors: false, + opacityFrom: 0.6, + opacityTo: 0.05, + stops: [20, 60, 100, 100] + } + }} resultClass='eventLineChart' facetClass='perspective1' />} diff --git a/src/client/configs/sampo/ApexCharts/LineChartConfig.js b/src/client/configs/sampo/ApexCharts/LineChartConfig.js index 358595d2f38710df0a999076b130f980c3c832c6..276a6fdcf33b17891989691c2026f9175ca39b4c 100644 --- a/src/client/configs/sampo/ApexCharts/LineChartConfig.js +++ b/src/client/configs/sampo/ApexCharts/LineChartConfig.js @@ -11,10 +11,16 @@ export const createSingleLineChartData = ({ yaxisTitle, seriesTitle, stroke, + fill, tooltip }) => { const apexChartOptionsWithData = { - ...singleLineChartOptions, + chart: { + type: 'line', + width: '100%', + height: '100%', + fontFamily: 'Roboto' + }, series: [ { name: seriesTitle, @@ -39,6 +45,7 @@ export const createSingleLineChartData = ({ } }, ...(stroke) && { stroke }, + ...(fill) && { fill }, ...(tooltip) && { tooltip } } return apexChartOptionsWithData @@ -54,6 +61,7 @@ export const createMultipleLineChartData = ({ yaxisTitle, seriesTitle, stroke, + fill, tooltip }) => { const series = [] @@ -64,7 +72,12 @@ export const createMultipleLineChartData = ({ }) } const apexChartOptionsWithData = { - ...multipleLineChartOptions, + chart: { + type: 'area', + width: '100%', + height: '100%', + fontFamily: 'Roboto' + }, series: series, title: { text: title @@ -86,37 +99,8 @@ export const createMultipleLineChartData = ({ } }, ...(stroke) && { stroke }, - ...(tooltip) && { tooltip }, - fill: { - type: 'gradient', - gradient: { - shadeIntensity: 1, - inverseColors: false, - opacityFrom: 0.6, - opacityTo: 0.05, - stops: [20, 60, 100, 100] - } - } + ...(fill) && { fill }, + ...(tooltip) && { tooltip } } return apexChartOptionsWithData } - -const singleLineChartOptions = { - // see https://apexcharts.com/docs --> Options - chart: { - type: 'line', - width: '100%', - height: '100%', - fontFamily: 'Roboto' - } -} - -const multipleLineChartOptions = { - // see https://apexcharts.com/docs --> Options - chart: { - type: 'area', - width: '100%', - height: '100%', - fontFamily: 'Roboto' - } -} diff --git a/src/server/sparql/Mappers.js b/src/server/sparql/Mappers.js index 01e66fba74377d7bd742b7303f276b3593b565a1..9b86e0c60cbbea2de0c25f0a910ad334eb4dd857 100644 --- a/src/server/sparql/Mappers.js +++ b/src/server/sparql/Mappers.js @@ -115,18 +115,7 @@ export const mapLineChart = ({ sparqlBindings, config }) => { } } -export const mapPieChart = sparqlBindings => { - const results = sparqlBindings.map(b => { - return { - category: b.category.value, - prefLabel: b.prefLabel.value, - instanceCount: b.instanceCount.value - } - }) - return results -} - -export const mapMultipleLineChart = sparqlBindings => { +export const mapMultipleLineChart = ({ sparqlBindings, config }) => { const res = {} sparqlBindings.forEach(b => { for (const p in b) { @@ -136,19 +125,49 @@ export const mapMultipleLineChart = sparqlBindings => { } }) const category = sparqlBindings.map(p => parseFloat(p.category.value)) - sparqlBindings.forEach((b, i) => { + + if (config && config.fillEmptyValues) { + // fill the missing years with zeroes + const valmax = Math.max(...category) + for (var i = Math.min(...category); i <= valmax; i++) { + for (const p in res) { + if (p !== 'category') { + res[p][i] = 0 + } + } + } + } + + // read the known years into the data object + sparqlBindings.forEach(b => { for (const p in b) { if (p !== 'category') { - res[p].push([category[i], parseFloat(b[p].value)]) + res[p][parseFloat(b.category.value)] = parseFloat(b[p].value) } } }) + + // sort by year and remove empty sequence at start and end for (const p in res) { - res[p] = trimResult(res[p]) + var arr = Object.entries(res[p]) + .map(p => [parseFloat(p[0]), p[1]]) + .sort((a, b) => ((a[0] < b[0]) ? -1 : ((a[0] > b[0]) ? 1 : 0))) + res[p] = trimResult(arr) } return res } +export const mapPieChart = sparqlBindings => { + const results = sparqlBindings.map(b => { + return { + category: b.category.value, + prefLabel: b.prefLabel.value, + instanceCount: b.instanceCount.value + } + }) + return results +} + export const linearScale = ({ data, config }) => { const { variable, minAllowed, maxAllowed } = config const length = data.length diff --git a/src/server/sparql/sampo/BackendSearchConfig.js b/src/server/sparql/sampo/BackendSearchConfig.js index 52b4180ccc6179bbd17c2be7d77ab3b7f39ce8bb..81efba9dacf16814888a329b2e1124a8795ac9e8 100644 --- a/src/server/sparql/sampo/BackendSearchConfig.js +++ b/src/server/sparql/sampo/BackendSearchConfig.js @@ -184,7 +184,10 @@ export const backendSearchConfig = { perspectiveID: 'perspective1', q: eventsByDecadeQuery, filterTarget: 'manuscript', - resultMapper: mapMultipleLineChart + resultMapper: mapMultipleLineChart, + resultMapperConfig: { + fillEmptyValues: false + } }, manuscriptInstancePageNetwork: { perspectiveID: 'perspective1', @@ -244,7 +247,10 @@ export const backendSearchConfig = { perspectiveID: 'emloActors', q: emloSentReceivedQuery, // filterTarget: 'id', - resultMapper: mapMultipleLineChart + resultMapper: mapMultipleLineChart, + resultMapperConfig: { + fillEmptyValues: false + } }, hellerauMigrations: { perspectiveID: 'hellerau',