You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2024/07/27 00:02:53 UTC
(superset) branch html_in_pivot created (now 6f857d72ae)
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a change to branch html_in_pivot
in repository https://gitbox.apache.org/repos/asf/superset.git
at 6f857d72ae feat: get html/links to work in pivot table
This branch includes the following new commits:
new 6f857d72ae feat: get html/links to work in pivot table
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(superset) 01/01: feat: get html/links to work in pivot table
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch html_in_pivot
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 6f857d72ae8f3d7fa6c11bc3734cb5a061cbff98
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Thu Jul 25 16:12:48 2024 -0700
feat: get html/links to work in pivot table
Allow for html to be rendered in pivot table, matching what's happening in the Table visualization as well as in the Samples and Results pane. Here I'm re-using the allowRenderHtml control that's used in Table for consistency.
I'm also using the superset-ui-core/utils/html module, which do everything it can to sanitize the html prior to safely rendering it.
---
.../src/PivotTableChart.tsx | 2 ++
.../src/plugin/controlPanel.tsx | 12 ++++++++++++
.../src/plugin/transformProps.ts | 2 ++
.../src/react-pivottable/TableRenderers.jsx | 21 ++++++++++++++++++---
4 files changed, 34 insertions(+), 3 deletions(-)
diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx b/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx
index 0c83a152df..a17bac64aa 100644
--- a/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx
@@ -154,6 +154,7 @@ export default function PivotTableChart(props: PivotTableProps) {
dateFormatters,
onContextMenu,
timeGrainSqla,
+ allowRenderHtml,
} = props;
const theme = useTheme();
@@ -555,6 +556,7 @@ export default function PivotTableChart(props: PivotTableProps) {
subtotalOptions={subtotalOptions}
namesMapping={verboseMap}
onContextMenu={handleContextMenu}
+ allowRenderHtml={allowRenderHtml}
/>
</PivotTableWrapper>
</Styles>
diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.tsx
index d0042547f9..ef0aac7434 100644
--- a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.tsx
@@ -428,6 +428,18 @@ const config: ControlPanelConfig = {
},
},
],
+ [
+ {
+ name: 'allow_render_html',
+ config: {
+ type: 'CheckboxControl',
+ label: t('Render columns in HTML format'),
+ renderTrigger: true,
+ default: true,
+ description: t('Render data in HTML format if applicable.'),
+ },
+ },
+ ],
],
},
],
diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts
index d8fd463bc0..f601828980 100644
--- a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts
@@ -105,6 +105,7 @@ export default function transformProps(chartProps: ChartProps<QueryFormData>) {
conditionalFormatting,
timeGrainSqla,
currencyFormat,
+ allowRenderHtml,
} = formData;
const { selectedFilters } = filterState;
const granularity = extractTimegrain(rawFormData);
@@ -174,5 +175,6 @@ export default function transformProps(chartProps: ChartProps<QueryFormData>) {
dateFormatters,
onContextMenu,
timeGrainSqla,
+ allowRenderHtml,
};
}
diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.jsx b/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.jsx
index 055c87b046..a9c5a29ff0 100644
--- a/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.jsx
+++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.jsx
@@ -18,7 +18,7 @@
*/
import { Component } from 'react';
-import { t } from '@superset-ui/core';
+import { t, safeHtmlSpan } from '@superset-ui/core';
import PropTypes from 'prop-types';
import { PivotData, flatKey } from './utilities';
import { Styles } from './Styles';
@@ -40,8 +40,13 @@ function displayHeaderCell(
onArrowClick,
value,
namesMapping,
+ allowRenderHtml,
) {
const name = namesMapping[value] || value;
+ const parsedLabel = parseLabel(name);
+ const labelContent = allowRenderHtml
+ ? safeHtmlSpan(parsedLabel)
+ : parsedLabel;
return needToggle ? (
<span className="toggle-wrapper">
<span
@@ -52,10 +57,10 @@ function displayHeaderCell(
>
{ArrowIcon}
</span>
- <span className="toggle-val">{parseLabel(name)}</span>
+ <span className="toggle-val">{labelContent}</span>
</span>
) : (
- parseLabel(name)
+ labelContent
);
}
@@ -179,6 +184,7 @@ export class TableRenderer extends Component {
colTotalCallbacks,
grandTotalCallback,
namesMapping,
+ allowRenderHtml: props.allowRenderHtml,
};
}
@@ -351,6 +357,7 @@ export class TableRenderer extends Component {
maxColVisible,
pivotData,
namesMapping,
+ allowRenderHtml,
} = pivotSettings;
const {
highlightHeaderCellsOnHover,
@@ -388,6 +395,7 @@ export class TableRenderer extends Component {
arrowClickHandle,
attrName,
namesMapping,
+ allowRenderHtml,
)}
</th>
);
@@ -453,6 +461,7 @@ export class TableRenderer extends Component {
onArrowClick,
headerCellFormattedValue,
namesMapping,
+ allowRenderHtml,
)}
</th>,
);
@@ -523,6 +532,7 @@ export class TableRenderer extends Component {
maxRowVisible,
pivotData,
namesMapping,
+ allowRenderHtml,
} = pivotSettings;
return (
<tr key="rowHdr">
@@ -546,6 +556,7 @@ export class TableRenderer extends Component {
arrowClickHandle,
r,
namesMapping,
+ allowRenderHtml,
)}
</th>
);
@@ -590,6 +601,7 @@ export class TableRenderer extends Component {
cellCallbacks,
rowTotalCallbacks,
namesMapping,
+ allowRenderHtml,
} = pivotSettings;
const {
@@ -659,6 +671,7 @@ export class TableRenderer extends Component {
onArrowClick,
headerCellFormattedValue,
namesMapping,
+ allowRenderHtml,
)}
</th>
);
@@ -871,6 +884,7 @@ export class TableRenderer extends Component {
colTotals,
rowSubtotalDisplay,
colSubtotalDisplay,
+ allowRenderHtml,
} = this.cachedBasePivotSettings;
// Need to account for exclusions to compute the effective row
@@ -895,6 +909,7 @@ export class TableRenderer extends Component {
maxColVisible: Math.max(...visibleColKeys.map(k => k.length)),
rowAttrSpans: this.calcAttrSpans(visibleRowKeys, rowAttrs.length),
colAttrSpans: this.calcAttrSpans(visibleColKeys, colAttrs.length),
+ allowRenderHtml,
...this.cachedBasePivotSettings,
};