Merge pull request #1924 from Inist-CNRS/feat/fullscreen-format

Add an options to open a chart in fullscreen
Inist-CNRS · Mar 25, 2024 · a95bc13 · a95bc13
2 parents 0ee8b27 + c3d2e86
commit a95bc13
Show file tree

Hide file tree

Showing 7 changed files with 230 additions and 138 deletions.
diff --git a/src/app/custom/translations.tsv b/src/app/custom/translations.tsv
@@ -1074,3 +1074,4 @@
 "import_error"	"Error during import"	"Erreur lors de l'import"
 "aspect_ratio"	"Aspect ratio (caution: if used incorrectly, this may cause page layout problems)"	"Format d'image (attention : si mal utilisé cela peut causer des problèmes de mise en page)"
 "aspect_ratio_none"	"No aspect ratio"	"Aucun format d'image"
+"fullscreen"	"View in full screen"	"Mettre en plein écran"
diff --git a/src/app/js/formats/chart/bubbleChart/BubbleView.js b/src/app/js/formats/chart/bubbleChart/BubbleView.js
@@ -8,6 +8,7 @@ import memoize from 'lodash/memoize';
 import injectData from '../../injectData';
 import Bubble from './Bubble';
 import { getColor } from '../../utils/colorUtils';
+import ZoomableFormat from '../../utils/components/ZoomableFormat';
 
 const styles = {
     container: memoize(({ diameter }) => ({
@@ -19,19 +20,21 @@ const styles = {
 };
 
 export const BubbleView = ({ data, diameter, colorSet }) => (
-    <div style={styles.container({ diameter })}>
-        {data.map(({ data: { _id: key }, r, x, y, value }, index) => (
-            <Bubble
-                key={key}
-                r={r}
-                x={x}
-                y={y}
-                name={key}
-                value={value}
-                color={getColor(colorSet, index)}
-            />
-        ))}
-    </div>
+    <ZoomableFormat>
+        <div style={styles.container({ diameter })}>
+            {data.map(({ data: { _id: key }, r, x, y, value }, index) => (
+                <Bubble
+                    key={key}
+                    r={r}
+                    x={x}
+                    y={y}
+                    name={key}
+                    value={value}
+                    color={getColor(colorSet, index)}
+                />
+            ))}
+        </div>
+    </ZoomableFormat>
 );
 
 BubbleView.propTypes = {
@@ -52,12 +55,10 @@ const mapStateToProps = (_, { formatData, diameter: stringDiameter }) => {
         };
     }
 
-    const packingFunction = pack()
-        .size([diameter, diameter])
-        .padding(5);
+    const packingFunction = pack().size([diameter, diameter]).padding(5);
 
     const root = hierarchy({ name: 'root', children: formatData })
-        .sum(d => d.value)
+        .sum((d) => d.value)
         .sort((a, b) => b.value - a.value);
     const data = packingFunction(root).leaves();
 

diff --git a/src/app/js/formats/chart/network/NetworkView.js b/src/app/js/formats/chart/network/NetworkView.js
@@ -12,12 +12,16 @@ import compose from 'recompose/compose';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
 import { scaleLinear } from 'd3-scale';
+import { StyleSheet, css } from 'aphrodite/no-important';
 
 import injectData from '../../injectData';
 import MouseIcon from '../../utils/components/MouseIcon';
+import ZoomableFormat from '../../utils/components/ZoomableFormat';
 
 const simulationOptions = {
     animate: true,
+    width: '100%',
+    height: '100%',
     strength: {
         charge: ({ radius }) => -radius * 100,
     },
@@ -28,18 +32,23 @@ const labelOffset = {
     y: ({ radius }) => radius * Math.sin(Math.PI / 4) + 6,
 };
 
-const styles = {
+const styles = StyleSheet.create({
     container: {
         overflow: 'hidden',
         userSelect: 'none',
+        height: '100%',
+        minHeight: '600px',
     },
-};
+    network: {
+        minHeight: '600px',
+    },
+});
 
 const zoomOptions = { minScale: 0.25, maxScale: 16 };
 
 class Network extends Component {
     mouseIcon = '';
-    createSimulation = options => {
+    createSimulation = (options) => {
         // extends react-vis-force createSimulation to get a reference on the simulation
         this.simulation = createSimulation(options);
 
@@ -63,34 +72,37 @@ class Network extends Component {
         const { nodes, links, colorSet } = this.props;
 
         return (
-            <div style={styles.container}>
-                <InteractiveForceGraph
-                    simulationOptions={simulationOptions}
-                    zoom
-                    showLabels
-                    zoomOptions={zoomOptions}
-                    labelAttr="label"
-                    labelOffset={labelOffset}
-                    highlightDependencies
-                    createSimulation={this.createSimulation}
-                >
-                    {nodes.map(node => (
-                        <ForceGraphNode
-                            key={node.id}
-                            node={node}
-                            fill={colorSet[0]}
-                        />
-                    ))}
-                    {links.map((link, index) => (
-                        <ForceGraphLink
-                            key={`${link.source}_${link.target}_${index}`}
-                            link={link}
-                        />
-                    ))}
-                </InteractiveForceGraph>
-
-                <div>{this.mouseIcon}</div>
-            </div>
+            <ZoomableFormat>
+                <div className={css(styles.container)}>
+                    <InteractiveForceGraph
+                        simulationOptions={simulationOptions}
+                        zoom
+                        showLabels
+                        zoomOptions={zoomOptions}
+                        labelAttr="label"
+                        labelOffset={labelOffset}
+                        highlightDependencies
+                        createSimulation={this.createSimulation}
+                        className={css(styles.network)}
+                    >
+                        {nodes.map((node) => (
+                            <ForceGraphNode
+                                key={node.id}
+                                node={node}
+                                fill={colorSet[0]}
+                            />
+                        ))}
+                        {links.map((link, index) => (
+                            <ForceGraphLink
+                                key={`${link.source}_${link.target}_${index}`}
+                                link={link}
+                            />
+                        ))}
+                    </InteractiveForceGraph>
+
+                    <div>{this.mouseIcon}</div>
+                </div>
+            </ZoomableFormat>
         );
     }
 }
@@ -161,7 +173,7 @@ const mapStateToProps = (state, { formatData }) => {
         .range([1, 20]);
 
     return {
-        nodes: nodes.map(node => ({
+        nodes: nodes.map((node) => ({
             ...node,
             radius: nodeScale(node.radius),
         })),

diff --git a/src/app/js/formats/chart/streamgraph/Streamgraph.js b/src/app/js/formats/chart/streamgraph/Streamgraph.js
@@ -22,6 +22,7 @@ import MouseIcon from '../../utils/components/MouseIcon';
 
 import CenterIcon from '../../utils/components/CenterIcon';
 import stylesToClassname from '../../../lib/stylesToClassName';
+import ZoomableFormat from '../../utils/components/ZoomableFormat';
 
 const styles = StyleSheet.create({
     divContainer: {
@@ -265,13 +266,13 @@ class Streamgraph extends PureComponent {
             }
             const area = d3
                 .area()
-                .x(d => {
+                .x((d) => {
                     return this.xAxisScale(d.data.date);
                 })
-                .y0(d => {
+                .y0((d) => {
                     return this.yAxisScale(d[0]);
                 })
-                .y1(d => {
+                .y1((d) => {
                     return this.yAxisScale(d[1]);
                 });
 
@@ -280,7 +281,7 @@ class Streamgraph extends PureComponent {
                 .data(stackedData)
                 .enter()
                 .append('path')
-                .attr('d', d => (d ? area(d) : []))
+                .attr('d', (d) => (d ? area(d) : []))
                 .attr('name', (d, i) => {
                     const currentName = nameList[i];
                     const currentColor = z[i];
@@ -453,11 +454,12 @@ class Streamgraph extends PureComponent {
                     this.hoveredKey = d3.select(nodes[i]).attr('name');
 
                     this.hoveredValue = d.find(
-                        elem => elem.data.date.getFullYear() === parseInt(date),
+                        (elem) =>
+                            elem.data.date.getFullYear() === parseInt(date),
                     ).data[this.hoveredKey];
 
                     this.hoveredColor = colorNameList.find(
-                        elem => elem.name === this.hoveredKey,
+                        (elem) => elem.name === this.hoveredKey,
                     ).color;
 
                     d3.select(nodes[i]).classed('hover', true);
@@ -501,7 +503,7 @@ class Streamgraph extends PureComponent {
     setMouseOutStreams(tooltip, colorNameList) {
         const componentContext = this;
         if (this.streams) {
-            this.streams.on('mouseout', function() {
+            this.streams.on('mouseout', function () {
                 componentContext.mouseIsOverStream = false;
                 componentContext.streams
                     .transition()
@@ -539,13 +541,8 @@ class Streamgraph extends PureComponent {
     }
 
     setGraph() {
-        const {
-            valuesObjectsArray,
-            valuesArray,
-            dateMin,
-            dateMax,
-            namesList,
-        } = transformDataIntoMapArray(this.props.formatData);
+        const { valuesObjectsArray, valuesArray, dateMin, dateMax, namesList } =
+            transformDataIntoMapArray(this.props.formatData);
 
         const svgWidth = this.divContainer.current.clientWidth;
         const { margin, height: svgHeight } = this.state;
@@ -614,21 +611,13 @@ class Streamgraph extends PureComponent {
             .selectAll('#d3DivContainer')
             .remove();
 
-        d3.select(this.divContainer.current)
-            .selectAll('#vertical')
-            .remove();
+        d3.select(this.divContainer.current).selectAll('#vertical').remove();
 
-        d3.select(this.divContainer.current)
-            .selectAll('#tooltip')
-            .remove();
+        d3.select(this.divContainer.current).selectAll('#tooltip').remove();
 
-        d3.select(this.anchor.current)
-            .selectAll('g')
-            .remove();
+        d3.select(this.anchor.current).selectAll('g').remove();
 
-        d3.select(this.anchor.current)
-            .selectAll('defs')
-            .remove();
+        d3.select(this.anchor.current).selectAll('defs').remove();
     }
 
     componentDidMount() {
@@ -665,52 +654,54 @@ class Streamgraph extends PureComponent {
             loading = '';
         }
         return (
-            <div
-                ref={this.divContainer}
-                style={styles.divContainer}
-                id={`divContainer${this.uniqueId}`}
-            >
+            <ZoomableFormat>
                 <div
-                    style={{
-                        textAlign: 'center',
-                        fontSize: '24px',
-                        paddingTop: '5px',
-                    }}
+                    ref={this.divContainer}
+                    style={styles.divContainer}
+                    id={`divContainer${this.uniqueId}`}
                 >
-                    {loading}
+                    <div
+                        style={{
+                            textAlign: 'center',
+                            fontSize: '24px',
+                            paddingTop: '5px',
+                        }}
+                    >
+                        {loading}
+                    </div>
+
+                    <div
+                        style={{
+                            position: 'absolute',
+                            top: 150 + (height - defaultArgs.height) + 'px',
+                            left: '5px',
+                        }}
+                    >
+                        {this.mouseIcon}
+                    </div>
+
+                    <div
+                        style={{
+                            position: 'absolute',
+                            top: 210 + (height - defaultArgs.height) + 'px',
+                            left: '12px',
+                        }}
+                        onClick={this.centerGraphClick}
+                        className={stylesWithClassnames.icon}
+                    >
+                        {this.centerIcon}
+                    </div>
+
+                    <svg
+                        id={`svgContainer${this.uniqueId}`}
+                        ref={this.svgContainer}
+                        width={width}
+                        height={height}
+                    >
+                        <g id="anchor" ref={this.anchor} />
+                    </svg>
                 </div>
-
-                <div
-                    style={{
-                        position: 'absolute',
-                        top: 150 + (height - defaultArgs.height) + 'px',
-                        left: '5px',
-                    }}
-                >
-                    {this.mouseIcon}
-                </div>
-
-                <div
-                    style={{
-                        position: 'absolute',
-                        top: 210 + (height - defaultArgs.height) + 'px',
-                        left: '12px',
-                    }}
-                    onClick={this.centerGraphClick}
-                    className={stylesWithClassnames.icon}
-                >
-                    {this.centerIcon}
-                </div>
-
-                <svg
-                    id={`svgContainer${this.uniqueId}`}
-                    ref={this.svgContainer}
-                    width={width}
-                    height={height}
-                >
-                    <g id="anchor" ref={this.anchor} />
-                </svg>
-            </div>
+            </ZoomableFormat>
         );
     }
 }