diff --git a/CHANGELOG.md b/CHANGELOG.md index 00e96cf4..52776be3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,17 @@ All notable changes to this project will be documented in this file. Dates are d Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). -### [5.0.0](https://github.com/eea/volto-plotlycharts/compare/4.0.0...5.0.0) - 3 November 2022 +### [5.0.1](https://github.com/eea/volto-plotlycharts/compare/5.0.0...5.0.1) - 4 November 2022 + +#### :hammer_and_wrench: Others + +- download cleaner, core metadata below csv data [andreiggr - [`479505a`](https://github.com/eea/volto-plotlycharts/commit/479505afc20d14604f773b0351fc8065f6d58feb)] +- download into it's own drawer [andreiggr - [`bfe0283`](https://github.com/eea/volto-plotlycharts/commit/bfe028388302428a422801a3bcdccafe7761abac)] +- select data from core-metadata into csv [andreiggr - [`68a88ad`](https://github.com/eea/volto-plotlycharts/commit/68a88ad7c25fb6171e94ab7fb30656b578ea633a)] +- enhancements embed eea [andreiggr - [`f01cf33`](https://github.com/eea/volto-plotlycharts/commit/f01cf33cca15a28d81d74b1681761ee0f49e8bf8)] +- Clean [andreiggr - [`5dbca0b`](https://github.com/eea/volto-plotlycharts/commit/5dbca0b8cebd93038c831cba7d08518c73077421)] +- Correct show/hide sources [andreiggr - [`da05c93`](https://github.com/eea/volto-plotlycharts/commit/da05c9337220cd956e2bae48a77120233e3fd346)] +## [5.0.0](https://github.com/eea/volto-plotlycharts/compare/4.0.0...5.0.0) - 3 November 2022 #### :hammer_and_wrench: Others @@ -35,6 +45,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). #### :hammer_and_wrench: Others - update(jest): add @plone/volto-slate resolver refs- #153447 [nileshgulia1 - [`ba5eda5`](https://github.com/eea/volto-plotlycharts/commit/ba5eda5e81dc494358e90f071b0c20c1896b48b7)] +- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`68acebc`](https://github.com/eea/volto-plotlycharts/commit/68acebca55be4cfbbc158646069ee03112c432cb)] - Use volto 16.0.0-alpha.14 for cypress tests [Miu Razvan - [`0c9a2c5`](https://github.com/eea/volto-plotlycharts/commit/0c9a2c56964387a89332caaeee8d4f68f1c119bb)] ### [3.0.6](https://github.com/eea/volto-plotlycharts/compare/3.0.5...3.0.6) - 15 July 2022 @@ -92,6 +103,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). - Better catches for plotly data [Andrei Grigore - [`597e6af`](https://github.com/eea/volto-plotlycharts/commit/597e6af6045789bb2a653933c373a369965f354a)] - Lint fix [Andrei Grigore - [`3c3f741`](https://github.com/eea/volto-plotlycharts/commit/3c3f741a5225188747fbf51ed2d4031560372e91)] - Set individual colors for barcharts also (WIP) [Andrei Grigore - [`c0ea139`](https://github.com/eea/volto-plotlycharts/commit/c0ea13919c998237d46dcbf1b456a10876f5df54)] +- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`8ebc425`](https://github.com/eea/volto-plotlycharts/commit/8ebc425a017ccb97e3783f73c5a13f19c6e11aaa)] - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`349d395`](https://github.com/eea/volto-plotlycharts/commit/349d3958dbebcf17056a4b28cc3a14905ed672b4)] ### [2.0.10](https://github.com/eea/volto-plotlycharts/compare/2.0.9...2.0.10) - 16 November 2021 @@ -163,6 +175,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). - Show info note with old editor on old editor data sources [Andrei Grigore - [`d60f16f`](https://github.com/eea/volto-plotlycharts/commit/d60f16f1d9d30bcaf9cf804513a55d8288bb31a0)] - Check for old editor data [Andrei Grigore - [`99074a1`](https://github.com/eea/volto-plotlycharts/commit/99074a1231224c697cca8f3f4df739a2ea61bff4)] - Switch Chart Text editor with SlateEditor [Andrei Grigore - [`33c59d7`](https://github.com/eea/volto-plotlycharts/commit/33c59d78bd1e123c39faf44e1395d978e9d68aa3)] +- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`d10f4a4`](https://github.com/eea/volto-plotlycharts/commit/d10f4a4eab154c9ffaae7be80d7a6ee23a4afc7c)] +- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`8d36a0a`](https://github.com/eea/volto-plotlycharts/commit/8d36a0a372a924960caf83609e4eaa3bede9a2b1)] +- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`1519427`](https://github.com/eea/volto-plotlycharts/commit/151942741b1683d572a096930a6a07323ab31b22)] ### [2.0.5](https://github.com/eea/volto-plotlycharts/compare/2.0.4...2.0.5) - 30 June 2021 #### :hammer_and_wrench: Others diff --git a/package.json b/package.json index 70ee04aa..d63b61db 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@eeacms/volto-plotlycharts", - "version": "5.0.0", + "version": "5.0.1", "description": "Plotly Charts and Editor integration for Volto", "main": "src/index.js", "author": "European Environment Agency: IDM2 A-Team", diff --git a/src/Blocks/EmbedEEAVisualization/Edit.jsx b/src/Blocks/EmbedEEAVisualization/Edit.jsx index 60e9d77e..c00399e8 100644 --- a/src/Blocks/EmbedEEAVisualization/Edit.jsx +++ b/src/Blocks/EmbedEEAVisualization/Edit.jsx @@ -2,6 +2,8 @@ import React from 'react'; import { SidebarPortal } from '@plone/volto/components'; import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm'; import ConnectedChart2 from '@eeacms/volto-plotlycharts/ConnectedChart2'; +import { connect } from 'react-redux'; +import { compose } from 'redux'; import '@eeacms/volto-plotlycharts/less/visualization.less'; import Schema from './schema'; @@ -24,7 +26,6 @@ const Edit = (props) => { }); } }, [block, data, onChangeBlock]); - return ( <> { use_live_data: true, vis_url: data.vis_url, with_sources: data.show_sources, - include_core_metadata_download: data.include_core_metadata_download, + include_sources_download: data?.include_sources_download, + include_other_org_download: data?.include_other_org_download, + include_temporal_coverage_download: + data?.include_temporal_coverage_download, }} hoverFormatXY={data.hover_format_xy} withSources={data.show_sources} @@ -64,4 +68,18 @@ const Edit = (props) => { ); }; -export default Edit; +export default compose( + connect( + (state, props) => ({ + //mapped core metadata data to props. Include more if needed + temporal_coverage: + state.content.subrequests?.[props.id]?.data?.temporal_coverage, + other_organisations: + state.content.subrequests?.[props.id]?.data?.other_organisations, + data_provenance: + state.content.subrequests?.[props.id]?.data?.data_provenance, + }), + {}, + ), + //add extra hoc here +)(Edit); diff --git a/src/Blocks/EmbedEEAVisualization/View.jsx b/src/Blocks/EmbedEEAVisualization/View.jsx index 7a7e0ca4..c0319435 100644 --- a/src/Blocks/EmbedEEAVisualization/View.jsx +++ b/src/Blocks/EmbedEEAVisualization/View.jsx @@ -24,7 +24,6 @@ const View = (props) => { computer: hasText ? 8 : 12, }, }; - return (
@@ -57,12 +56,14 @@ const View = (props) => { has_data_query_by_provider: data.has_data_query_by_provider, use_live_data: true, vis_url: data.vis_url, - with_sources: data.with_sources, - include_core_metadata_download: - data.include_core_metadata_download, + with_sources: data.show_sources, + include_sources_download: data?.include_sources_download, + include_other_org_download: data?.include_other_org_download, + include_temporal_coverage_download: + data?.include_temporal_coverage_download, }} hoverFormatXY={data.hover_format_xy} - withSources={true} + withSources={data.show_sources} width={data.width} height={data.height} /> diff --git a/src/Blocks/EmbedEEAVisualization/schema.js b/src/Blocks/EmbedEEAVisualization/schema.js index 00d4c7fc..f2250481 100644 --- a/src/Blocks/EmbedEEAVisualization/schema.js +++ b/src/Blocks/EmbedEEAVisualization/schema.js @@ -1,6 +1,46 @@ import React from 'react'; +const makeMetadataOptions = (data) => { + if (data && data.length > 0) { + return data + .map((item) => [...Object.keys(item)]) //get all keys, should be the same for all + .flat(1) // flatten all arrays + .reduce(function (a, b) { + if (a.indexOf(b) < 0) a.push(b); + return a; + }, []) //remove duplicates. We need only one set of keys + .map((item) => [item, item]); //map them for choices + } + return []; +}; + const Schema = (props) => { + const hasSources = + props.data_provenance && + props.data.download_button && + props.data_provenance.data && + props.data_provenance.data.length > 0; + const hasOtherOrg = + props.data.download_button && + props.other_organisations && + props.other_organisations.length > 0; + const hasTemporalCoverage = + props.data.download_button && + props.temporal_coverage && + props.temporal_coverage.temporal && + props.temporal_coverage.temporal.length > 0; + + const data_provenance_options = makeMetadataOptions( + props?.data_provenance?.data, + ); + + const temporal_coverage_options = makeMetadataOptions( + props?.temporal_coverage?.temporal, + ); + + const other_organisations_options = makeMetadataOptions( + props?.other_organisations, + ); return { title: 'Embed EEA visualization', @@ -8,14 +48,17 @@ const Schema = (props) => { { id: 'default', title: 'Default', + fields: ['vis_url', 'height', 'hover_format_xy', 'show_sources'], + }, + { + id: 'download', + title: 'Download', fields: [ - 'vis_url', - 'height', - 'hover_format_xy', - 'show_sources', 'download_button', - ...(props.data.download_button - ? ['include_core_metadata_download'] + ...(hasSources ? ['include_sources_download'] : []), + ...(hasOtherOrg ? ['include_other_org_download'] : []), + ...(hasTemporalCoverage + ? ['include_temporal_coverage_download'] : []), ], }, @@ -62,10 +105,23 @@ const Schema = (props) => { title: 'Toggle download', type: 'boolean', }, - include_core_metadata_download: { - title: 'Download core metadata', - description: 'Include core metadata in the dowloaded CSV', - type: 'boolean', + include_sources_download: { + title: 'Download sources', + description: 'Include sources in the dowloaded CSV', + choices: data_provenance_options, + isMulti: true, + }, + include_other_org_download: { + title: 'Download other organisations', + description: 'Include other organisations in the dowloaded CSV', + choices: other_organisations_options, + isMulti: true, + }, + include_temporal_coverage_download: { + title: 'Download temporal coverage', + description: 'Include temporal coverage in the dowloaded CSV', + choices: temporal_coverage_options, + isMulti: true, }, show_sources: { title: 'Toggle sources', diff --git a/src/ConnectedChart2/ConnectedChart2.jsx b/src/ConnectedChart2/ConnectedChart2.jsx index 3c07baca..1b313bc7 100644 --- a/src/ConnectedChart2/ConnectedChart2.jsx +++ b/src/ConnectedChart2/ConnectedChart2.jsx @@ -14,6 +14,22 @@ import SourcesWidget from './Sources'; const LoadablePlotly = loadable(() => import('react-plotly.js')); +const filterItemsIds = (items, allowedIds) => { + const newItems = + items && items.length > 0 + ? items + .map((item) => { + var newItem = {}; + allowedIds.forEach((id) => { + newItem[id] = item[id]; + }); + return newItem; + }) + .filter((value) => Object.keys(value).length !== 0) + : []; + return newItems; +}; + /* * ConnectedChart */ @@ -26,14 +42,15 @@ function ConnectedChart2(props) { visualization, visualization_data, width, - data_provenance, height = 450, id, + //core-metadata data + data_provenance, other_organisations, temporal_coverage, } = props; const use_live_data = props.data?.use_live_data ?? true; - const with_sources = props.data?.with_sources ?? true; + const with_sources = props?.withSources ?? false; const chartData = visualization?.chartData || visualization_data?.chartData || {}; @@ -132,13 +149,29 @@ function ConnectedChart2(props) { } provider_data={provider_data} provider_metadata={provider_metadata} - include_core_metadata_download={ - props.data.include_core_metadata_download - } core_metadata={{ - data_provenance: data_provenance?.data, - other_organisations, - temporal_coverage: temporal_coverage?.temporal, + data_provenance: props.data?.include_sources_download + ? filterItemsIds( + data_provenance?.data, + props.data?.include_sources_download, + ) + : '', + other_organisations: props.data?.include_other_org_download + ? filterItemsIds( + other_organisations, + props.data?.include_other_org_download, + ) + : '', + temporal_coverage: + props.data?.include_temporal_coverage_download && + props.data?.include_temporal_coverage_download.length > 0 && + temporal_coverage?.temporal && + temporal_coverage?.temporal?.length > 0 + ? filterItemsIds( + temporal_coverage?.temporal, + props.data?.include_temporal_coverage_download, + ) + : '', }} /> )} diff --git a/src/ConnectedChart2/Download.jsx b/src/ConnectedChart2/Download.jsx index fb0fbc02..a411e200 100644 --- a/src/ConnectedChart2/Download.jsx +++ b/src/ConnectedChart2/Download.jsx @@ -114,16 +114,16 @@ function exportCSVFile(csv, title = 'data') { } } -const spreadCoreMetadata = (core_metadata, maxRowsProvData) => { +const spreadCoreMetadata = (core_metadata) => { let spread_metadata = {}; Object.keys(core_metadata).forEach((key) => { if (core_metadata[key].length > 0) { core_metadata[key].forEach((item) => { Object.keys(item).forEach((subkey) => { - if (!spread_metadata['Core metadata']) { - spread_metadata['Core metadata'] = [' ']; + if (!spread_metadata['EEA Core Metadata']) { + spread_metadata['EEA Core Metadata'] = [' ']; } else { - spread_metadata['Core metadata'].push(' '); + spread_metadata['EEA Core Metadata'].push(' '); } if (!spread_metadata[`${key}_${subkey}`]) { spread_metadata[`${key}_${subkey}`] = [item[subkey]]; @@ -139,12 +139,10 @@ const spreadCoreMetadata = (core_metadata, maxRowsProvData) => { a.length > b.length ? a : b, ).length; - const maxRows = maxRowsProvData > coreMaxRows ? maxRowsProvData : coreMaxRows; - let evenMatrix = spread_metadata; Object.entries(evenMatrix).forEach(([key, items]) => { - if (items.length < maxRows) { - for (let i = items.length; i < maxRows; i++) { + if (items.length < coreMaxRows) { + for (let i = items.length; i < coreMaxRows; i++) { items.push(''); } } @@ -162,10 +160,11 @@ const Download = (props) => { providers_data, providers_metadata, core_metadata, - include_core_metadata_download, } = props; + const handleDownloadData = () => { let array = []; + let core_metadata_array = []; let readme = provider_metadata?.readme ? [provider_metadata?.readme] : []; const mappedData = { ...provider_data, @@ -181,22 +180,22 @@ const Download = (props) => { core_metadata?.other_organisation?.length > 0 || core_metadata?.temporal_coverage?.length > 0; - if (include_core_metadata_download && hasCoreMetadata) { - const maxRowsMappedData = Object.values(mappedData).reduce((a, b) => - a.length > b.length ? a : b, - ).length; - - Object.entries( - spreadCoreMetadata(core_metadata, maxRowsMappedData), - ).forEach(([key, items]) => { - items.forEach((item, index) => { - if (!array[index]) array[index] = {}; - array[index][key] = item; - }); - }); + if (hasCoreMetadata) { + Object.entries(spreadCoreMetadata(core_metadata)).forEach( + ([key, items]) => { + items.forEach((item, index) => { + if (!core_metadata_array[index]) core_metadata_array[index] = {}; + core_metadata_array[index][key] = item; + }); + }, + ); } - const csv = convertToCSV(array, readme); + const data_csv = convertToCSV(array, readme); + const core_metadata_csv = hasCoreMetadata + ? convertToCSV(core_metadata_array, readme) + : ''; + const csv = hasCoreMetadata ? data_csv + core_metadata_csv : data_csv; exportCSVFile(csv, title); };