From 4f79a95069d165884c05fddbac3543a65fce0033 Mon Sep 17 00:00:00 2001 From: Edoardo Sabadelli Date: Thu, 2 Mar 2023 15:56:05 +0100 Subject: [PATCH] chore: remove accidentally committed temp files --- .../Item/VisualizationItem/Item.js.new | 312 ----------------- .../Item/VisualizationItem/Item.js.old | 321 ------------------ .../Visualization/Visualization.js.new | 208 ------------ 3 files changed, 841 deletions(-) delete mode 100644 src/components/Item/VisualizationItem/Item.js.new delete mode 100644 src/components/Item/VisualizationItem/Item.js.old delete mode 100644 src/components/Item/VisualizationItem/Visualization/Visualization.js.new diff --git a/src/components/Item/VisualizationItem/Item.js.new b/src/components/Item/VisualizationItem/Item.js.new deleted file mode 100644 index db1dd7486..000000000 --- a/src/components/Item/VisualizationItem/Item.js.new +++ /dev/null @@ -1,312 +0,0 @@ -import { useD2 } from '@dhis2/app-runtime-adapter-d2' -import i18n from '@dhis2/d2-i18n' -import { Tag, Tooltip } from '@dhis2/ui' -import PropTypes from 'prop-types' -import React, { useCallback, useEffect, useRef, useState } from 'react' -import { shallowEqual, useDispatch, useSelector } from 'react-redux' -import { acSetItemActiveType } from '../../../actions/itemActiveTypes.js' -import { acAddVisualization } from '../../../actions/visualizations.js' -import { apiPostDataStatistics } from '../../../api/dataStatistics.js' -import { apiFetchVisualization } from '../../../api/fetchVisualization.js' -import { - isEditMode, - isPrintMode, - isViewMode, -} from '../../../modules/dashboardModes.js' -import { getItemHeightPx } from '../../../modules/gridUtil.js' -import { - getVisualizationId, - getVisualizationName, -} from '../../../modules/item.js' -import { - getDataStatisticsName, - getItemTypeForVis, - EVENT_VISUALIZATION, -} from '../../../modules/itemTypes.js' -import { sGetIsEditing } from '../../../reducers/editDashboard.js' -import { sGetItemActiveType } from '../../../reducers/itemActiveTypes.js' -import { - sGetItemFiltersRoot, - DEFAULT_STATE_ITEM_FILTERS, -} from '../../../reducers/itemFilters.js' -import { sGetVisualization } from '../../../reducers/visualizations.js' -import { SystemSettingsCtx } from '../../SystemSettingsProvider.js' -import { WindowDimensionsCtx } from '../../WindowDimensionsProvider.js' -import ItemHeader from '../ItemHeader/ItemHeader.js' -import FatalErrorBoundary from './FatalErrorBoundary.js' -import { getGridItemElement } from './getGridItemElement.js' -import { isElementFullscreen } from './isElementFullscreen.js' -import ItemContextMenu from './ItemContextMenu/ItemContextMenu.js' -import ItemFooter from './ItemFooter.js' -import { pluginIsAvailable } from './Visualization/plugin.js' -import Visualization from './Visualization/Visualization.js' - -const Item = ({ - dashboardMode, - gridWidth, - item, - settings, - onToggleItemExpanded, -}) => { - const { d2 } = useD2() - const dispatch = useDispatch() - - const [showFooter, setShowFooter] = useState(false) - const [configLoaded, setConfigLoaded] = useState(false) - const [loadItemFailed, setLoadItemFailed] = useState(false) - const [showNoFiltersOverlay, setShowNoFiltersOverlay] = useState( - item?.type === EVENT_VISUALIZATION - ) - - const contentRef = useRef(null) - const headerRef = useRef(null) - - const isEditing = useSelector(sGetIsEditing) - const activeType = useSelector((state) => - sGetItemActiveType(state, item?.id) - ) - const visualization = - useSelector( - (state) => sGetVisualization(state, getVisualizationId(item)), - shallowEqual // XXX - ) || {} - - const itemFiltersViewMode = useSelector(sGetItemFiltersRoot) - - const itemFilters = !isEditMode(dashboardMode) - ? itemFiltersViewMode - : DEFAULT_STATE_ITEM_FILTERS - - const style = window.getComputedStyle(document.documentElement) - - const itemContentPadding = parseInt( - style.getPropertyValue('--item-content-padding').replace('px', '') - ) - - const itemHeaderTotalMargin = - parseInt( - style.getPropertyValue('--item-header-margin-top').replace('px', '') - ) + - parseInt( - style - .getPropertyValue('--item-header-margin-bottom') - .replace('px', '') - ) - - const memoizedGetContentHeight = useCallback( - (calculatedHeight, measuredHeight, preferMeasured) => - preferMeasured - ? measuredHeight || calculatedHeight - : calculatedHeight, - [] - ) - - useEffect(() => { - const loadVisualization = async () => { - dispatch(acAddVisualization(await apiFetchVisualization(item))) - - try { - if ( - settings.keyGatherAnalyticalObjectStatisticsInDashboardViews && - isViewMode(dashboardMode) - ) { - await apiPostDataStatistics( - getDataStatisticsName(item.type), - getVisualizationId(item) - ) - } - } catch (e) { - console.log(e) - } - } - - loadVisualization() - - setConfigLoaded(true) - }, [dashboardMode, dispatch, item, settings]) - - const isFullscreenSupported = () => { - const el = getGridItemElement(item.id) - return !!(el?.requestFullscreen || el?.webkitRequestFullscreen) - } - - const onClickNoFiltersOverlay = useCallback( - () => setShowNoFiltersOverlay(false), - [setShowNoFiltersOverlay] - ) - - const onToggleFullscreen = () => { - if (!isElementFullscreen(item.id)) { - const el = getGridItemElement(item.id) - if (el?.requestFullscreen) { - el.requestFullscreen() - } else if (el?.webkitRequestFullscreen) { - el.webkitRequestFullscreen() - } - } else { - document.exitFullscreen - ? document.exitFullscreen() - : document.webkitExitFullscreen() - } - } - - const onToggleFooter = () => { - // XXX still not sync but does what we want or should we move the toggle call in some useEffect? - setShowFooter((showFooter) => { - onToggleItemExpanded(item.id) - return !showFooter - }) - } - - const setActiveType = (type) => { - type !== getActiveType() && dispatch(acSetItemActiveType(item.id, type)) - } - - const getActiveType = () => { - if (isEditing) { - return getItemTypeForVis(item) - } - return activeType || getItemTypeForVis(item) - } - - const getAvailableHeight = ({ width, height }) => { - if (isElementFullscreen(item.id)) { - return ( - height - - headerRef.current.clientHeight - - itemHeaderTotalMargin - - itemContentPadding - ) - } - - const calculatedHeight = - getItemHeightPx(item, width) - - headerRef.current.clientHeight - - itemHeaderTotalMargin - - itemContentPadding - - return memoizedGetContentHeight( - calculatedHeight, - contentRef ? contentRef.current.offsetHeight : null, - isEditMode(dashboardMode) || isPrintMode(dashboardMode) - ) - } - - const getAvailableWidth = () => { - const rect = getGridItemElement(item.id)?.getBoundingClientRect() - - return rect && rect.width - itemContentPadding * 2 - } - - const onFatalError = useCallback( - () => setLoadItemFailed(true), - [setLoadItemFailed] - ) - - const activeTypeComputed = getActiveType() - const actionButtons = - pluginIsAvailable(activeTypeComputed || item.type, d2) && - isViewMode(dashboardMode) ? ( - - ) : null - - const tags = - isViewMode(dashboardMode) && - Object.keys(itemFilters).length && - !showNoFiltersOverlay && - activeTypeComputed === EVENT_VISUALIZATION ? ( - - {i18n.t('Filters not applied')} - - ) : null - - return ( - <> - - -
(contentRef = ref)} // XXX - ref={contentRef} - > - {configLoaded && ( - - {(dimensions) => ( - - )} - - )} -
- - {isViewMode(dashboardMode) && showFooter ? ( - - ) : null} - - ) -} - -Item.propTypes = { - dashboardMode: PropTypes.string, - gridWidth: PropTypes.number, - item: PropTypes.object, - settings: PropTypes.object, - onToggleItemExpanded: PropTypes.func, -} - -Item.defaultProps = { - item: {}, - onToggleItemExpanded: Function.prototype, -} - -const ItemWithSettings = (props) => ( - - {({ systemSettings }) => } - -) - -export default ItemWithSettings diff --git a/src/components/Item/VisualizationItem/Item.js.old b/src/components/Item/VisualizationItem/Item.js.old deleted file mode 100644 index dd77daa1a..000000000 --- a/src/components/Item/VisualizationItem/Item.js.old +++ /dev/null @@ -1,321 +0,0 @@ -import i18n from '@dhis2/d2-i18n' -import { Tag, Tooltip } from '@dhis2/ui' -import PropTypes from 'prop-types' -import React, { Component } from 'react' -import { connect } from 'react-redux' -import { acSetItemActiveType } from '../../../actions/itemActiveTypes.js' -import { acAddVisualization } from '../../../actions/visualizations.js' -import { apiPostDataStatistics } from '../../../api/dataStatistics.js' -import { apiFetchVisualization } from '../../../api/fetchVisualization.js' -import { - isEditMode, - isPrintMode, - isViewMode, -} from '../../../modules/dashboardModes.js' -import { getItemHeightPx } from '../../../modules/gridUtil.js' -import { - getVisualizationId, - getVisualizationName, -} from '../../../modules/item.js' -import { - getDataStatisticsName, - getItemTypeForVis, - EVENT_VISUALIZATION, -} from '../../../modules/itemTypes.js' -import { sGetIsEditing } from '../../../reducers/editDashboard.js' -import { sGetItemActiveType } from '../../../reducers/itemActiveTypes.js' -import { - sGetItemFiltersRoot, - DEFAULT_STATE_ITEM_FILTERS, -} from '../../../reducers/itemFilters.js' -import { sGetVisualization } from '../../../reducers/visualizations.js' -import { SystemSettingsCtx } from '../../SystemSettingsProvider.js' -import { WindowDimensionsCtx } from '../../WindowDimensionsProvider.js' -import ItemHeader from '../ItemHeader/ItemHeader.js' -import FatalErrorBoundary from './FatalErrorBoundary.js' -import { getGridItemElement } from './getGridItemElement.js' -import { isElementFullscreen } from './isElementFullscreen.js' -import ItemContextMenu from './ItemContextMenu/ItemContextMenu.js' -import ItemFooter from './ItemFooter.js' -import memoizeOne from './memoizeOne.js' -import { pluginIsAvailable } from './Visualization/plugin.js' -import Visualization from './Visualization/Visualization.js' - -class Item extends Component { - state = { - showFooter: false, - configLoaded: false, - loadItemFailed: false, - showNoFiltersOverlay: this.props.item?.type === EVENT_VISUALIZATION, - } - - constructor(props) { - super(props) - - this.contentRef = React.createRef() - this.headerRef = React.createRef() - - const style = window.getComputedStyle(document.documentElement) - this.itemContentPadding = parseInt( - style.getPropertyValue('--item-content-padding').replace('px', '') - ) - - this.itemHeaderTotalMargin = - parseInt( - style - .getPropertyValue('--item-header-margin-top') - .replace('px', '') - ) + - parseInt( - style - .getPropertyValue('--item-header-margin-bottom') - .replace('px', '') - ) - - this.memoizedGetContentHeight = memoizeOne( - (calculatedHeight, measuredHeight, preferMeasured) => - preferMeasured - ? measuredHeight || calculatedHeight - : calculatedHeight - ) - } - - async componentDidMount() { - this.props.setVisualization( - await apiFetchVisualization(this.props.item) - ) - - try { - if ( - this.props.settings - .keyGatherAnalyticalObjectStatisticsInDashboardViews && - isViewMode(this.props.dashboardMode) - ) { - await apiPostDataStatistics( - getDataStatisticsName(this.props.item.type), - getVisualizationId(this.props.item) - ) - } - } catch (e) { - console.log(e) - } - - this.setState({ configLoaded: true }) - } - - isFullscreenSupported = () => { - const el = getGridItemElement(this.props.item.id) - return !!(el?.requestFullscreen || el?.webkitRequestFullscreen) - } - - onToggleFullscreen = () => { - if (!isElementFullscreen(this.props.item.id)) { - const el = getGridItemElement(this.props.item.id) - if (el?.requestFullscreen) { - el.requestFullscreen() - } else if (el?.webkitRequestFullscreen) { - el.webkitRequestFullscreen() - } - } else { - document.exitFullscreen - ? document.exitFullscreen() - : document.webkitExitFullscreen() - } - } - - onToggleFooter = () => { - this.setState( - { showFooter: !this.state.showFooter }, - this.props.onToggleItemExpanded(this.props.item.id) - ) - } - - setActiveType = (type) => { - type !== this.getActiveType() && - this.props.setActiveType(this.props.item.id, type) - } - - getActiveType = () => { - if (this.props.isEditing) { - return getItemTypeForVis(this.props.item) - } - return this.props.activeType || getItemTypeForVis(this.props.item) - } - - getAvailableHeight = ({ width, height }) => { - if (isElementFullscreen(this.props.item.id)) { - return ( - height - - this.headerRef.current.clientHeight - - this.itemHeaderTotalMargin - - this.itemContentPadding - ) - } - - const calculatedHeight = - getItemHeightPx(this.props.item, width) - - this.headerRef.current.clientHeight - - this.itemHeaderTotalMargin - - this.itemContentPadding - - return this.memoizedGetContentHeight( - calculatedHeight, - this.contentRef ? this.contentRef.offsetHeight : null, - isEditMode(this.props.dashboardMode) || - isPrintMode(this.props.dashboardMode) - ) - } - - getAvailableWidth = () => { - const rect = getGridItemElement( - this.props.item.id - )?.getBoundingClientRect() - - return rect && rect.width - this.itemContentPadding * 2 - } - - onFatalError = () => { - this.setState({ loadItemFailed: true }) - } - - render() { - const { item, dashboardMode, itemFilters } = this.props - const { showFooter, showNoFiltersOverlay } = this.state - const activeType = this.getActiveType() - - const actionButtons = - pluginIsAvailable(activeType || item.type, this.props.d2) && - isViewMode(dashboardMode) ? ( - - ) : null - - const tags = - isViewMode(dashboardMode) && - Object.keys(itemFilters).length && - !showNoFiltersOverlay && - activeType === EVENT_VISUALIZATION ? ( - - {i18n.t('Filters not applied')} - - ) : null - - return ( - <> - - -
(this.contentRef = ref)} - > - {this.state.configLoaded && ( - - {(dimensions) => ( - - this.setState({ - showNoFiltersOverlay: false, - }) - } - /> - )} - - )} -
- - {isViewMode(dashboardMode) && showFooter ? ( - - ) : null} - - ) - } -} - -Item.propTypes = { - activeType: PropTypes.string, - d2: PropTypes.object, - dashboardMode: PropTypes.string, - gridWidth: PropTypes.number, - isEditing: PropTypes.bool, - item: PropTypes.object, - itemFilters: PropTypes.object, - setActiveType: PropTypes.func, - setVisualization: PropTypes.func, - settings: PropTypes.object, - visualization: PropTypes.object, - onToggleItemExpanded: PropTypes.func, -} - -Item.defaultProps = { - item: {}, - onToggleItemExpanded: Function.prototype, - visualization: {}, -} - -const mapStateToProps = (state, ownProps) => { - const itemFilters = !isEditMode(ownProps.dashboardMode) - ? sGetItemFiltersRoot(state) - : DEFAULT_STATE_ITEM_FILTERS - - return { - activeType: sGetItemActiveType(state, ownProps.item?.id), - isEditing: sGetIsEditing(state), - itemFilters, - visualization: sGetVisualization( - state, - getVisualizationId(ownProps.item) - ), - } -} - -const mapDispatchToProps = { - setActiveType: acSetItemActiveType, - setVisualization: acAddVisualization, -} - -const ItemWithSettings = (props) => ( - - {({ systemSettings }) => } - -) - -export default connect(mapStateToProps, mapDispatchToProps)(ItemWithSettings) diff --git a/src/components/Item/VisualizationItem/Visualization/Visualization.js.new b/src/components/Item/VisualizationItem/Visualization/Visualization.js.new deleted file mode 100644 index c7dfc4247..000000000 --- a/src/components/Item/VisualizationItem/Visualization/Visualization.js.new +++ /dev/null @@ -1,208 +0,0 @@ -import { useD2 } from '@dhis2/app-runtime-adapter-d2' -import i18n from '@dhis2/d2-i18n' -import { Button, Cover, IconInfo24, colors } from '@dhis2/ui' -import uniqueId from 'lodash/uniqueId.js' -import PropTypes from 'prop-types' -import React, { useMemo } from 'react' -import { useSelector } from 'react-redux' -//import { isEditMode } from '../../../../modules/dashboardModes.js' -//import { getVisualizationId } from '../../../../modules/item.js' -import { - VISUALIZATION, - EVENT_VISUALIZATION, - MAP, - CHART, - REPORT_TABLE, - getItemTypeForVis, -} from '../../../../modules/itemTypes.js' -//import { -// sGetItemFiltersRoot, -// DEFAULT_STATE_ITEM_FILTERS, -//} from '../../../../reducers/itemFilters.js' -import { sGetSelectedId } from '../../../../reducers/selected.js' -//import { sGetVisualization } from '../../../../reducers/visualizations.js' -import getFilteredVisualization from './getFilteredVisualization.js' -import getVisualizationConfig from './getVisualizationConfig.js' -import IframePlugin from './IframePlugin.js' -import LegacyPlugin from './LegacyPlugin.js' -//import MapPlugin from './MapPlugin.js' -import NoVisualizationMessage from './NoVisualizationMessage.js' -import { pluginIsAvailable } from './plugin.js' -import classes from './styles/Visualization.module.css' - -const Visualization = ({ - visualization, - activeType, - item, - itemFilters, - availableHeight, - availableWidth, - dashboardMode, - // dashboardId, - showNoFiltersOverlay, - onClickNoFiltersOverlay, - ...rest -}) => { - const { d2 } = useD2() - - const dashboardId = useSelector(sGetSelectedId) - - const memoizedVisualizationConfig = getVisualizationConfig( - visualization, - getItemTypeForVis(item), - activeType - ) - - const memoizedFilterVersion = useMemo( - () => uniqueId(itemFilters), - [itemFilters] - ) - - const memoizedFilteredVisualization = useMemo( - () => - getFilteredVisualization(memoizedVisualizationConfig, itemFilters), - [memoizedVisualizationConfig, itemFilters] - ) - - /* - const memoizedGetFilteredVisualization = memoizeOne( - getFilteredVisualization - ) - const memoizedGetVisualizationConfig = memoizeOne(getVisualizationConfig) - - const getFilterVersion = memoizeOne(() => uniqueId()) -*/ - if (!visualization) { - return - } - - const style = { height: availableHeight } - if (availableWidth) { - style.width = availableWidth - } - /* - const visualizationConfig = memoizedGetVisualizationConfig( - visualization, - getItemTypeForVis(item), - activeType - ) - - const filterVersion = getFilterVersion(itemFilters) -*/ - switch (activeType) { - case CHART: - case REPORT_TABLE: - case MAP: - case VISUALIZATION: { - return ( - - ) - } - case EVENT_VISUALIZATION: { - return ( - <> - {showNoFiltersOverlay ? ( - -
- - {i18n.t( - 'Filters are not applied to line list dashboard items.' - )} - -
- - ) : null} - - - ) - } - /* - case MAP: { - return ( - - ) - }*/ - default: { - return pluginIsAvailable(activeType || item.type, d2) ? ( - - ) : ( - - ) - } - } -} - -Visualization.propTypes = { - activeType: PropTypes.string, - availableHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - availableWidth: PropTypes.number, - dashboardId: PropTypes.string, - dashboardMode: PropTypes.string, - item: PropTypes.object, - itemFilters: PropTypes.object, - showNoFiltersOverlay: PropTypes.bool, - visualization: PropTypes.object, - onClickNoFiltersOverlay: PropTypes.func, -} -/* -const mapStateToProps = (state, ownProps) => { - const itemFilters = !isEditMode(ownProps.dashboardMode) - ? sGetItemFiltersRoot(state) - : DEFAULT_STATE_ITEM_FILTERS - - return { - dashboardId: sGetSelectedId(state), - itemFilters, - visualization: sGetVisualization( - state, - getVisualizationId(ownProps.item) - ), - } -} - -export default connect(mapStateToProps)(Visualization) -*/ - -export default Visualization