@truedat/dd 4.44.3 → 4.45.0

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();
-  });
-});