@truedat/dd 4.44.5 → 4.45.0

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [4.44.4] 2022-05-19
 
-## Added
+### Added
 
 - [TD-4660] Support for reference datasets
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.44.5",
+  "version": "4.45.0",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.44.5",
+    "@truedat/test": "4.45.0",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.4",
-    "@truedat/auth": "4.44.5",
-    "@truedat/core": "4.44.5",
-    "@truedat/df": "4.44.5",
+    "@truedat/auth": "4.45.0",
+    "@truedat/core": "4.45.0",
+    "@truedat/df": "4.45.0",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -99,7 +99,6 @@
     "react-moment": "^1.1.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
-    "react-vis": "^1.11.7",
     "redux": "^4.1.1",
     "redux-saga": "^1.1.3",
     "redux-saga-routines": "^3.2.3",
@@ -107,9 +106,10 @@
     "svg-pan-zoom": "^3.6.1"
   },
   "peerDependencies": {
+    "@truedat/profile": ">= 4.45.0",
     "react": ">= 16.8.6 < 17",
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "5a339468198c803592b285eddd0dd0c0b0eced93"
+  "gitHead": "b8a49c6bae0bbde203dfb4763a5657fc398e3b7a"
 }

package/src/components/StructureTabPane.js

@@ -18,7 +18,6 @@ import StructureLineage from "./StructureLineage";
 import StructureNotes from "./StructureNotes";
 import StructureNotesEdit from "./StructureNotesEdit";
 import StructureParentRelations from "./StructureParentRelations";
-import StructureProfiling from "./StructureProfiling";
 import StructureVersions from "./StructureVersions";
 import StructureMetadata from "./StructureMetadata";
 import StructureNotesLoader from "./StructureNotesLoader";
@@ -26,6 +25,9 @@ import StructureNotesLoader from "./StructureNotesLoader";
 const StructureLinks = React.lazy(() =>
   import("@truedat/lm/components/StructureLinks")
 );
+
+const StructureProfile = React.lazy(() => import("@truedat/profile"));
+
 const StructureRelationForm = React.lazy(() =>
   import("@truedat/lm/components/StructureRelationForm")
 );
@@ -59,7 +61,7 @@ export const StructureTabPane = ({ activeTab, tabVisibility }) => (
         <Route render={() => <StructureLinks />} />
       </Switch>
     )}
-    {activeTab === "profile" && tabVisibility.profile && <StructureProfiling />}
+    {activeTab === "profile" && tabVisibility.profile && <StructureProfile />}
     {activeTab === "parents" && <StructureParentRelations />}
     {activeTab === "children" && <StructureChildrenRelations />}
     {activeTab === "versions" && <StructureVersions />}

package/src/components/__tests__/__snapshots__/StructureTabPane.spec.js.snap

@@ -55,7 +55,7 @@ exports[`<StructureTabPane /> matches the latest snapshot: notes 1`] = `
 
 exports[`<StructureTabPane /> matches the latest snapshot: profile 1`] = `
 <ErrorBoundary>
-  <Connect(StructureProfiling) />
+  <lazy />
 </ErrorBoundary>
 `;
 

package/src/components/index.js

@@ -8,8 +8,6 @@ import LineageDownloadButton from "./LineageDownloadButton";
 import LineageGroup from "./LineageGroup";
 import LineageLink from "./LineageLink";
 import LineageRoutes from "./LineageRoutes";
-import ProfilingGraph from "./ProfilingGraph";
-import ProfilingPatterns from "./ProfilingPatterns";
 import StructureCrumbs from "./StructureCrumbs";
 import StructureEvents from "./StructureEvents";
 import StructureFieldRow from "./StructureFieldRow";
@@ -23,7 +21,6 @@ import StructureLoader from "./StructureLoader";
 import StructureNav from "./StructureNav";
 import StructureNotes from "./StructureNotes";
 import StructureNotesEdit from "./StructureNotesEdit";
-import StructureProfiling from "./StructureProfiling";
 import StructureProperties from "./StructureProperties";
 import StructureRow from "./StructureRow";
 import StructureSelectedFilters from "./StructureSelectedFilters";
@@ -64,8 +61,6 @@ export {
   LineageGroup,
   LineageLink,
   LineageRoutes,
-  ProfilingGraph,
-  ProfilingPatterns,
   StructureCrumbs,
   StructureEvents,
   StructureFieldRow,
@@ -79,7 +74,6 @@ export {
   StructureNav,
   StructureNotes,
   StructureNotesEdit,
-  StructureProfiling,
   StructureProperties,
   StructureMetadata,
   StructureRow,

package/src/components/ProfilingElements.js

@@ -1,89 +0,0 @@
-import _ from "lodash/fp";
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Button, Icon, Grid } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
-import ProfilingGraph from "./ProfilingGraph";
-import ProfilingPatterns from "./ProfilingPatterns";
-
-export const ProfilingElements = ({ profile }) => {
-  const { most_frequent, patterns } = profile || {};
-  const [elementActive, setElementActive] = useState("graph");
-  const titleElement =
-    elementActive === "graph"
-      ? "structure.field.graph.title"
-      : "structure.field.patterns.title";
-  return (
-    <>
-      {!_.isEmpty(most_frequent) && !_.isEmpty(patterns) && (
-        <>
-          <Grid>
-            <Grid.Column width={8}>
-              <p>
-                <FormattedMessage id={titleElement} />:
-              </p>
-            </Grid.Column>
-            <Grid.Column width={8} textAlign="right">
-              <Button.Group floated="right">
-                <Button
-                  active={elementActive === "graph"}
-                  icon
-                  onClick={() => setElementActive("graph")}
-                >
-                  <Icon name="chart line" />
-                </Button>
-                <Button
-                  active={elementActive === "patterns"}
-                  icon
-                  onClick={() => setElementActive("patterns")}
-                >
-                  <Icon name="list ul" />
-                </Button>
-              </Button.Group>
-            </Grid.Column>
-          </Grid>
-
-          {elementActive === "graph" && <ProfilingGraph />}
-          {elementActive === "patterns" && <ProfilingPatterns />}
-        </>
-      )}
-
-      {!_.isEmpty(most_frequent) && _.isEmpty(patterns) && (
-        <>
-          <Grid>
-            <Grid.Column width={16}>
-              <p>
-                <FormattedMessage id="structure.field.graph.title" />:
-              </p>
-            </Grid.Column>
-          </Grid>
-
-          <ProfilingGraph />
-        </>
-      )}
-
-      {_.isEmpty(most_frequent) && !_.isEmpty(patterns) && (
-        <>
-          <Grid>
-            <Grid.Column width={16}>
-              <p>
-                <FormattedMessage id="structure.field.patterns.title" />
-              </p>
-            </Grid.Column>
-          </Grid>
-
-          <ProfilingPatterns />
-        </>
-      )}
-    </>
-  );
-};
-
-ProfilingElements.propTypes = {
-  profile: PropTypes.object,
-};
-
-const mapStateToProps = ({ structureProfile: profile }) => ({ profile });
-
-export default connect(mapStateToProps)(ProfilingElements);

package/src/components/ProfilingGraph.js

@@ -1,89 +0,0 @@
-import _ from "lodash/fp";
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Label } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
-import { XYPlot, XAxis, YAxis, HorizontalBarSeries, Hint } from "react-vis";
-
-const getDistribution = _.flow(
-  _.pathOr("[]", "most_frequent"),
-  _.map(({ k, v }) => ({ x: v, y: k })),
-  _.orderBy("x", "desc"),
-  _.take(30),
-  _.reverse
-);
-
-const getMinMax = _.flow(
-  _.map("x"),
-  (d) => [_.min(d) - 1, _.max(d)],
-  _.defaultTo([-Infinity, Infinity])
-);
-
-const formatNumber = (num) =>
-  num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
-
-export const ProfilingGraph = ({ count, distribution }) => {
-  const [hintValue, setHintValue] = useState(null);
-  const data = _.map((d) => ({ color: d.y == hintValue?.y ? 0 : 1, ...d }))(
-    distribution
-  );
-  return (
-    <XYPlot
-      yType="ordinal"
-      xType="linear"
-      width={800}
-      height={400}
-      margin={{ left: 180 }}
-      xDomain={getMinMax(data)}
-      colorRange={["#ed5c17", "#002057"]}
-    >
-      <YAxis
-        tickFormat={_.truncate({ length: 30 })}
-        style={{ fontSize: "12px", width: "100px" }}
-      />
-      <XAxis style={{ fontSize: "12px" }} />
-      <HorizontalBarSeries
-        onValueMouseOver={setHintValue}
-        onValueMouseOut={() => setHintValue(null)}
-        data={data}
-      />
-      {hintValue ? (
-        <Hint
-          style={{ width: "500px", bottom: "190px" }}
-          align={{ horizontal: "right", vertical: "top" }}
-          value={hintValue}
-        >
-          <Label pointing="left" className="graph">
-            <div>
-              <div>
-                <FormattedMessage id="structure.field.graph.value" />
-                {hintValue.y}
-              </div>
-              <div>
-                <FormattedMessage id="structure.field.graph.count" />
-                {formatNumber(hintValue.x)}
-              </div>
-              <div>
-                <FormattedMessage id="structure.field.graph.percentage" />
-                {Math.floor((hintValue.x / count) * 100) + "%"}
-              </div>
-            </div>
-          </Label>
-        </Hint>
-      ) : null}
-    </XYPlot>
-  );
-};
-
-ProfilingGraph.propTypes = {
-  count: PropTypes.number,
-  distribution: PropTypes.arrayOf(PropTypes.object),
-};
-
-const mapStateToProps = ({ structureProfile }) => ({
-  count: structureProfile?.total_count,
-  distribution: getDistribution(structureProfile),
-});
-
-export default connect(mapStateToProps)(ProfilingGraph);

package/src/components/ProfilingPatterns.js

@@ -1,57 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Table } from "semantic-ui-react";
-import { useIntl } from "react-intl";
-
-export const ProfilingPatterns = ({ patterns, totalCount }) => {
-  const { formatNumber, formatMessage } = useIntl();
-  const dataPatterns = _.flow(
-    _.orderBy("v", "desc"),
-    _.map(({ k, v }) => ({
-      frecuency: k,
-      count: formatNumber(v),
-      percentage: parseFloat(((v / totalCount) * 100).toFixed(2)),
-    }))
-  )(patterns);
-
-  return !_.isEmpty(dataPatterns) ? (
-    <Table>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>
-            {formatMessage({ id: "structure.field.patterns.frecuency" })}
-          </Table.HeaderCell>
-          <Table.HeaderCell>
-            {formatMessage({ id: "structure.field.patterns.count" })}
-          </Table.HeaderCell>
-          <Table.HeaderCell>
-            {formatMessage({ id: "structure.field.patterns.percentage" })}
-          </Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {dataPatterns.map((pattern, i) => (
-          <Table.Row key={i}>
-            <Table.Cell>{pattern.frecuency}</Table.Cell>
-            <Table.Cell>{pattern.count}</Table.Cell>
-            <Table.Cell>{`${pattern.percentage} %`}</Table.Cell>
-          </Table.Row>
-        ))}
-      </Table.Body>
-    </Table>
-  ) : null;
-};
-
-ProfilingPatterns.propTypes = {
-  patterns: PropTypes.array,
-  totalCount: PropTypes.number,
-};
-
-const mapStateToProps = ({ structureProfile }) => ({
-  patterns: structureProfile?.patterns,
-  totalCount: structureProfile?.total_count,
-});
-
-export default connect(mapStateToProps)(ProfilingPatterns);

package/src/components/StructureProfiling.js

@@ -1,124 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Table } from "semantic-ui-react";
-import { useIntl } from "react-intl";
-import { Link } from "react-router-dom";
-import { linkTo } from "@truedat/core/routes";
-import { getSortedFields } from "../selectors";
-import ProfilingElements from "./ProfilingElements";
-
-const calculatePercent = (value_count, total_count) =>
-  ((parseFloat(value_count) / parseFloat(total_count)) * 100).toFixed(2) + "%";
-
-const calculateUniquePercent = ({ unique_count, total_count }) =>
-  calculatePercent(unique_count, total_count);
-const calculateNullPercent = ({ null_count, total_count }) =>
-  calculatePercent(null_count, total_count);
-
-const calculateMode = (distribution) =>
-  _.isEmpty(distribution)
-    ? "-"
-    : _.flow(_.orderBy("v", "desc"), _.head, _.prop("k"))(distribution);
-
-export const FieldProfileRow = ({ profile, data_structure_id, name }) => {
-  const { unique_count, null_count, total_count, min, max, most_frequent } =
-    profile;
-  const uniquePercent =
-    !_.isNil(unique_count) && !_.isNil(total_count) && total_count > 0
-      ? calculateUniquePercent(profile)
-      : "-";
-  const nullPercent =
-    !_.isNil(null_count) && !_.isNil(total_count)
-      ? calculateNullPercent(profile)
-      : "-";
-
-  const maxLength = 50;
-  const truncFn = _.truncate({ length: maxLength });
-  const minValue = _.isNil(min) ? "-" : truncFn(min);
-  const maxValue = _.isNil(max) ? "-" : truncFn(max);
-  const minTitle = !_.isNil(min) && min.length > maxLength ? min : "";
-  const maxTitle = !_.isNil(max) && max.length > maxLength ? max : "";
-  const modeValue = _.isNil(most_frequent) ? "-" : calculateMode(most_frequent);
-
-  return (
-    <Table.Row>
-      <Table.Cell>
-        <Link
-          to={
-            _.isNil(most_frequent)
-              ? linkTo.STRUCTURE({ id: data_structure_id })
-              : linkTo.STRUCTURE_PROFILE({ id: data_structure_id })
-          }
-        >
-          {name}
-        </Link>
-      </Table.Cell>
-      <Table.Cell className="text-right" content={uniquePercent} />
-      <Table.Cell className="text-right" content={nullPercent} />
-      <Table.Cell>
-        <span title={minTitle}> {minValue} </span>
-      </Table.Cell>
-      <Table.Cell>
-        <span title={maxTitle}> {maxValue} </span>
-      </Table.Cell>
-      <Table.Cell content={modeValue} />
-    </Table.Row>
-  );
-};
-
-FieldProfileRow.propTypes = {
-  data_structure_id: PropTypes.number,
-  name: PropTypes.string,
-  profile: PropTypes.object,
-};
-
-export const StructureProfiling = ({ fields }) => {
-  const { formatMessage } = useIntl();
-  return _.isEmpty(fields) ? (
-    <ProfilingElements />
-  ) : (
-    <Table>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell
-            content={formatMessage({ id: "profiling.field.name" })}
-          />
-          <Table.HeaderCell
-            className="text-right"
-            content={formatMessage({ id: "profiling.field.unique" })}
-          />
-          <Table.HeaderCell
-            className="text-right"
-            content={formatMessage({ id: "profiling.field.null" })}
-          />
-          <Table.HeaderCell
-            content={formatMessage({ id: "profiling.field.min" })}
-          />
-          <Table.HeaderCell
-            content={formatMessage({ id: "profiling.field.max" })}
-          />
-          <Table.HeaderCell
-            content={formatMessage({ id: "profiling.field.mode" })}
-          />
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {fields.map((field, i) => (
-          <FieldProfileRow key={i} {...field} />
-        ))}
-      </Table.Body>
-    </Table>
-  );
-};
-
-StructureProfiling.propTypes = {
-  fields: PropTypes.array,
-};
-
-const mapStateToProps = (state) => ({
-  fields: _.filter(_.has("profile"))(getSortedFields(state)),
-});
-
-export default connect(mapStateToProps)(StructureProfiling);

package/src/components/__tests__/StructureProfiling.spec.js

@@ -1,45 +0,0 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import StructureProfiling from "../StructureProfiling";
-
-const profile = {
-  unique_count: 5,
-  null_count: 2,
-  total_count: 10,
-  min: "33",
-  max: "40",
-  most_frequent: [
-    { k: "foo", v: 10 },
-    { k: "bar", v: 42 },
-  ],
-};
-
-const messages = {
-  en: {
-    "profiling.field.max": "max",
-    "profiling.field.min": "min",
-    "profiling.field.mode": "mode",
-    "profiling.field.name": "name",
-    "profiling.field.null": "null",
-    "profiling.field.unique": "unique",
-    "structure.field.graph.title": "Frequency chart",
-  },
-};
-
-describe("<StructureProfiling />", () => {
-  it("matches the latest snapshot (fields)", () => {
-    const structureFields = [
-      { data_structure_id: 123, name: "field1", profile },
-      { data_structure_id: 122, name: "field2", profile },
-    ];
-    const state = { structureFields };
-    const { container } = render(<StructureProfiling />, { messages, state });
-    expect(container).toMatchSnapshot();
-  });
-
-  it("matches the latest snapshot (profile)", () => {
-    const state = { structureProfile: profile };
-    const { container } = render(<StructureProfiling />, { messages, state });
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/components/__tests__/__snapshots__/StructureProfiling.spec.js.snap

@@ -1,444 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<StructureProfiling /> matches the latest snapshot (fields) 1`] = `
-<div>
-  <table
-    class="ui table"
-  >
-    <thead
-      class=""
-    >
-      <tr
-        class=""
-      >
-        <th
-          class=""
-        >
-          name
-        </th>
-        <th
-          class="text-right"
-        >
-          unique
-        </th>
-        <th
-          class="text-right"
-        >
-          null
-        </th>
-        <th
-          class=""
-        >
-          min
-        </th>
-        <th
-          class=""
-        >
-          max
-        </th>
-        <th
-          class=""
-        >
-          mode
-        </th>
-      </tr>
-    </thead>
-    <tbody
-      class=""
-    >
-      <tr
-        class=""
-      >
-        <td
-          class=""
-        >
-          <a
-            href="/structures/123/profile"
-          >
-            field1
-          </a>
-        </td>
-        <td
-          class="text-right"
-        >
-          50.00%
-        </td>
-        <td
-          class="text-right"
-        >
-          20.00%
-        </td>
-        <td
-          class=""
-        >
-          <span
-            title=""
-          >
-             
-            33
-             
-          </span>
-        </td>
-        <td
-          class=""
-        >
-          <span
-            title=""
-          >
-             
-            40
-             
-          </span>
-        </td>
-        <td
-          class=""
-        >
-          bar
-        </td>
-      </tr>
-      <tr
-        class=""
-      >
-        <td
-          class=""
-        >
-          <a
-            href="/structures/122/profile"
-          >
-            field2
-          </a>
-        </td>
-        <td
-          class="text-right"
-        >
-          50.00%
-        </td>
-        <td
-          class="text-right"
-        >
-          20.00%
-        </td>
-        <td
-          class=""
-        >
-          <span
-            title=""
-          >
-             
-            33
-             
-          </span>
-        </td>
-        <td
-          class=""
-        >
-          <span
-            title=""
-          >
-             
-            40
-             
-          </span>
-        </td>
-        <td
-          class=""
-        >
-          bar
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
-exports[`<StructureProfiling /> matches the latest snapshot (profile) 1`] = `
-<div>
-  <div
-    class="ui grid"
-  >
-    <div
-      class="sixteen wide column"
-    >
-      <p>
-        Frequency chart
-        :
-      </p>
-    </div>
-  </div>
-  <div
-    class="rv-xy-plot "
-    style="width: 800px; height: 400px;"
-  >
-    <svg
-      class="rv-xy-plot__inner"
-      height="400"
-      width="800"
-    >
-      <g
-        class="rv-xy-plot__axis rv-xy-plot__axis--vertical "
-        style="font-size: 12px; width: 100px;"
-        transform="translate(0,10)"
-      >
-        <line
-          class="rv-xy-plot__axis__line"
-          style="font-size: 12px; width: 100px;"
-          x1="180"
-          x2="180"
-          y1="0"
-          y2="350"
-        />
-        <g
-          class="rv-xy-plot__axis__ticks"
-          transform="translate(180, 0)"
-        >
-          <g
-            class="rv-xy-plot__axis__tick"
-            style="font-size: 12px; width: 100px;"
-            transform="translate(0, 262.5)"
-          >
-            <line
-              class="rv-xy-plot__axis__tick__line"
-              style="font-size: 12px; width: 100px;"
-              x1="6"
-              x2="-6"
-              y1="0"
-              y2="0"
-            />
-            <text
-              class="rv-xy-plot__axis__tick__text"
-              dy="0.32em"
-              style="font-size: 12px; width: 100px;"
-              text-anchor="end"
-              transform="translate(-14, 0)"
-            >
-              foo
-            </text>
-          </g>
-          <g
-            class="rv-xy-plot__axis__tick"
-            style="font-size: 12px; width: 100px;"
-            transform="translate(0, 87.5)"
-          >
-            <line
-              class="rv-xy-plot__axis__tick__line"
-              style="font-size: 12px; width: 100px;"
-              x1="6"
-              x2="-6"
-              y1="0"
-              y2="0"
-            />
-            <text
-              class="rv-xy-plot__axis__tick__text"
-              dy="0.32em"
-              style="font-size: 12px; width: 100px;"
-              text-anchor="end"
-              transform="translate(-14, 0)"
-            >
-              bar
-            </text>
-          </g>
-        </g>
-      </g>
-      <g
-        class="rv-xy-plot__axis rv-xy-plot__axis--horizontal "
-        style="font-size: 12px;"
-        transform="translate(180,360)"
-      >
-        <line
-          class="rv-xy-plot__axis__line"
-          style="font-size: 12px;"
-          x1="0"
-          x2="610"
-          y1="0"
-          y2="0"
-        />
-        <g
-          class="rv-xy-plot__axis__ticks"
-          transform="translate(0, 0)"
-        >
-          <g
-            class="rv-xy-plot__axis__tick"
-            style="font-size: 12px;"
-            transform="translate(18.484848484848484, 0)"
-          >
-            <line
-              class="rv-xy-plot__axis__tick__line"
-              style="font-size: 12px;"
-              x1="0"
-              x2="0"
-              y1="-6"
-              y2="6"
-            />
-            <text
-              class="rv-xy-plot__axis__tick__text"
-              dy="0.72em"
-              style="font-size: 12px;"
-              text-anchor="middle"
-              transform="translate(0, 14)"
-            >
-              10
-            </text>
-          </g>
-          <g
-            class="rv-xy-plot__axis__tick"
-            style="font-size: 12px;"
-            transform="translate(110.9090909090909, 0)"
-          >
-            <line
-              class="rv-xy-plot__axis__tick__line"
-              style="font-size: 12px;"
-              x1="0"
-              x2="0"
-              y1="-6"
-              y2="6"
-            />
-            <text
-              class="rv-xy-plot__axis__tick__text"
-              dy="0.72em"
-              style="font-size: 12px;"
-              text-anchor="middle"
-              transform="translate(0, 14)"
-            >
-              15
-            </text>
-          </g>
-          <g
-            class="rv-xy-plot__axis__tick"
-            style="font-size: 12px;"
-            transform="translate(203.33333333333331, 0)"
-          >
-            <line
-              class="rv-xy-plot__axis__tick__line"
-              style="font-size: 12px;"
-              x1="0"
-              x2="0"
-              y1="-6"
-              y2="6"
-            />
-            <text
-              class="rv-xy-plot__axis__tick__text"
-              dy="0.72em"
-              style="font-size: 12px;"
-              text-anchor="middle"
-              transform="translate(0, 14)"
-            >
-              20
-            </text>
-          </g>
-          <g
-            class="rv-xy-plot__axis__tick"
-            style="font-size: 12px;"
-            transform="translate(295.75757575757575, 0)"
-          >
-            <line
-              class="rv-xy-plot__axis__tick__line"
-              style="font-size: 12px;"
-              x1="0"
-              x2="0"
-              y1="-6"
-              y2="6"
-            />
-            <text
-              class="rv-xy-plot__axis__tick__text"
-              dy="0.72em"
-              style="font-size: 12px;"
-              text-anchor="middle"
-              transform="translate(0, 14)"
-            >
-              25
-            </text>
-          </g>
-          <g
-            class="rv-xy-plot__axis__tick"
-            style="font-size: 12px;"
-            transform="translate(388.1818181818182, 0)"
-          >
-            <line
-              class="rv-xy-plot__axis__tick__line"
-              style="font-size: 12px;"
-              x1="0"
-              x2="0"
-              y1="-6"
-              y2="6"
-            />
-            <text
-              class="rv-xy-plot__axis__tick__text"
-              dy="0.72em"
-              style="font-size: 12px;"
-              text-anchor="middle"
-              transform="translate(0, 14)"
-            >
-              30
-            </text>
-          </g>
-          <g
-            class="rv-xy-plot__axis__tick"
-            style="font-size: 12px;"
-            transform="translate(480.60606060606057, 0)"
-          >
-            <line
-              class="rv-xy-plot__axis__tick__line"
-              style="font-size: 12px;"
-              x1="0"
-              x2="0"
-              y1="-6"
-              y2="6"
-            />
-            <text
-              class="rv-xy-plot__axis__tick__text"
-              dy="0.72em"
-              style="font-size: 12px;"
-              text-anchor="middle"
-              transform="translate(0, 14)"
-            >
-              35
-            </text>
-          </g>
-          <g
-            class="rv-xy-plot__axis__tick"
-            style="font-size: 12px;"
-            transform="translate(573.0303030303031, 0)"
-          >
-            <line
-              class="rv-xy-plot__axis__tick__line"
-              style="font-size: 12px;"
-              x1="0"
-              x2="0"
-              y1="-6"
-              y2="6"
-            />
-            <text
-              class="rv-xy-plot__axis__tick__text"
-              dy="0.72em"
-              style="font-size: 12px;"
-              text-anchor="middle"
-              transform="translate(0, 14)"
-            >
-              40
-            </text>
-          </g>
-        </g>
-      </g>
-      <g
-        class="rv-xy-plot__series rv-xy-plot__series--bar "
-        transform="translate(180,10)"
-      >
-        <rect
-          height="148.75"
-          style="opacity: 1; stroke: rgb(0, 32, 87); fill: rgb(0, 32, 87);"
-          width="18.484848484848484"
-          x="0"
-          y="188.125"
-        />
-        <rect
-          height="148.75"
-          style="opacity: 1; stroke: rgb(0, 32, 87); fill: rgb(0, 32, 87);"
-          width="610"
-          x="0"
-          y="13.125"
-        />
-      </g>
-    </svg>
-  </div>
-</div>
-`;