From 352b26ac2e7d271aa28c591245d7a36838c8275d Mon Sep 17 00:00:00 2001
From: Kyle Doherty <kyle.l.doherty@gmail.com>
Date: Thu, 9 Nov 2017 13:10:11 -0800
Subject: [PATCH] cleanup and translation
---
.../metabase/xray/components/InsightCard.jsx | 143 +++++++-----------
1 file changed, 57 insertions(+), 86 deletions(-)
diff --git a/frontend/src/metabase/xray/components/InsightCard.jsx b/frontend/src/metabase/xray/components/InsightCard.jsx
index 73af2e341e3..8ce3019b5af 100644
--- a/frontend/src/metabase/xray/components/InsightCard.jsx
+++ b/frontend/src/metabase/xray/components/InsightCard.jsx
@@ -1,14 +1,10 @@
import React, { Component } from 'react'
-import {
- //formatListOfItems,
- formatTimeWithUnit,
- //inflect
-} from "metabase/lib/formatting";
+import { formatTimeWithUnit } from "metabase/lib/formatting";
import Icon from "metabase/components/Icon";
import { Link } from "react-router";
import Question from "metabase-lib/lib/Question";
import { TermWithDefinition } from "metabase/components/TermWithDefinition";
-import { t } from 'c-3po'
+import { t, jt } from 'c-3po'
const InsightText = ({ children }) =>
<p className="text-paragraph">
@@ -30,14 +26,14 @@ const Feedback = ({ insightType }) =>
export class NormalRangeInsight extends Component {
static insightType = "normal-range"
- static title = "Normal range of values"
+ static title = t`Normal range of values`
static icon = "insight"
render() {
const { lower, upper, features: { model } } = this.props
return (
<InsightText>
- Most of the values for { model.display_name || model.name } are between <b>{ lower }</b> and <b>{ upper }</b>.
+ { jt`Most of the values for ${ model.display_name || model.name } are between ${<b>{ lower }</b>} and ${<b>{ upper }</b>}.` }
</InsightText>
)
}
@@ -45,7 +41,7 @@ export class NormalRangeInsight extends Component {
export class NilsInsight extends Component {
static insightType = "nils"
- static title = "Missing data"
+ static title = t`Missing data`
static icon = "warning"
render() {
@@ -62,7 +58,7 @@ export class NilsInsight extends Component {
// construct the question with filter
return (
<InsightText>
- You have { quality } missing (null) values in your data.
+ {t`You have ${ quality } missing (null) values in your data`}.
<span> </span>
{ table && <span><Link to={viewAllRowsUrl}>View all rows</Link> with missing value.</span> }
</InsightText>
@@ -72,7 +68,7 @@ export class NilsInsight extends Component {
export class ZerosInsight extends Component {
static insightType = "zeros"
- static title = "Zeros in your data"
+ static title = t`Zeros in your data`
static icon = "warning"
render() {
@@ -89,7 +85,7 @@ export class ZerosInsight extends Component {
// construct the question with filter
return (
<InsightText>
- You have { quality } zeros in your data. They may be standins for missing data or indicate some other abnormality.
+ { t`You have ${ quality } zeros in your data. They may be standins for missing data or indicate some other abnormality.` }
<span> </span>
{ table && <span><Link to={viewAllRowsUrl}>View all rows</Link> with zeros.</span> }
</InsightText>
@@ -97,12 +93,12 @@ export class ZerosInsight extends Component {
}
}
-const noisinessDefinition = "Noisy data is highly variable jumping all over the place with changes carrying relatively little information."
+const noisinessDefinition = t`Noisy data is highly variable jumping all over the place with changes carrying relatively little information.`
const noisinessLink = "https://en.wikipedia.org/wiki/Noisy_data"
export class NoisinessInsight extends Component {
static insightType = "noisiness"
- static title = "Noisy data"
+ static title = t`Noisy data`
static icon = "warning"
render() {
@@ -117,19 +113,19 @@ export class NoisinessInsight extends Component {
link={noisinessLink}
>
noisy
- </TermWithDefinition>.
- { resolution && ` You might consider looking at it by ${resolution}.` }
+ </TermWithDefinition>.
+ { resolution && ` You might consider looking at it by ${resolution}.` }
</InsightText>
)
}
}
-const autocorrelationDefinition = "Measure of how much (changes in) previous values predict future values."
+const autocorrelationDefinition = t`Measure of how much (changes in) previous values predict future values.`
const autocorrelationLink = "https://en.wikipedia.org/wiki/Autocorrelation"
export class AutocorrelationInsight extends Component {
static insightType = "autocorrelation"
- static title = "Autocorrelation"
+ static title = t`Autocorrelation`
static icon = "insight"
render() {
@@ -145,12 +141,12 @@ export class AutocorrelationInsight extends Component {
}
}
-const variationTrendDefinition = "How variance in your data is changing over time."
+const variationTrendDefinition = t`How variance in your data is changing over time.`
const varianceLink = "https://en.wikipedia.org/wiki/Variance"
export class VariationTrendInsight extends Component {
static insightType = "variation-trend"
- static title = `Trending variation`
+ static title = t`Trending variation`
static icon = "insight"
render() {
@@ -168,7 +164,7 @@ export class VariationTrendInsight extends Component {
export class SeasonalityInsight extends Component {
static insightType = "seasonality"
- static title = "Seasonality"
+ static title = t`Seasonality`
static icon = "insight"
render() {
@@ -176,18 +172,18 @@ export class SeasonalityInsight extends Component {
return (
<InsightText>
- Your data has a { quality } seasonal compoment.
+ { jt`Your data has a ${ quality } seasonal compoment.` }
</InsightText>
)
}
}
-const multimodalDefinition = "Data distribution with multiple peaks (modes)."
+const multimodalDefinition = t`Data distribution with multiple peaks (modes).`
const multimodalLink = "https://en.wikipedia.org/wiki/Multimodal_distribution"
export class MultimodalInsight extends Component {
static insightType = "multimodal"
- static title = "Multimodal"
+ static title = t`Multimodal`
static icon = "warning"
render() {
@@ -203,75 +199,77 @@ export class MultimodalInsight extends Component {
export class OutliersInsight extends Component {
static insightType = "outliers"
- static title = "Outliers"
+ static title = t`Outliers`
static icon = "warning"
render() {
const { filter, features: { table } } = this.props
const viewAllRowsUrl = table && Question.create()
- .query()
- // imitate the required hydrated metadata format
- .setTable({ ...table, database: { id: table.db_id }})
- .addFilter(filter)
- .question()
- .getUrl()
+ .query()
+ // imitate the required hydrated metadata format
+ .setTable({ ...table, database: { id: table.db_id }})
+ .addFilter(filter)
+ .question()
+ .getUrl()
// construct the question with filter
- return (
- <InsightText>
+ return (
+ <InsightText>
You have some outliers.
<span> </span>
{ table && <span><Link to={viewAllRowsUrl}>View all rows</Link> with outliers.</span> }
- </InsightText>
+ </InsightText>
)
}
}
export class StructuralBreaksInsight extends Component {
static insightType = "structural-breaks"
- static title = "Structural breaks"
+ static title = t`Structural breaks`
static icon = "insight"
render() {
- const { breaks, features: { resolution } } = this.props
-
- const breakPoints = breaks.map( (point, idx) => {
- point = formatTimeWithUnit(point, resolution);
- if (idx == breaks.length - 1 && breaks.length > 1) {
- return (
- <span>, and { point }</span>
- )
- } else {
- return (
- <span>{ idx > 0 && <span>, </span>}{ point }</span>
- )
- }
- })
+
+ const { breaks, features: { resolution } } = this.props
+
+ const breakPoints = breaks.map( (point, idx) => {
+ point = formatTimeWithUnit(point, resolution);
+
+ if (idx == breaks.length - 1 && breaks.length > 1) {
+ return (
+ <span>, and { point }</span>
+ )
+ } else {
+ return (
+ <span>{ idx > 0 && <span>, </span>}{ point }</span>
+ )
+ }
+ })
return (
<InsightText>
- It looks like your data has
- { breaks.length > 1 && <span> structural breaks </span>}
- { breaks.length == 1 && <span> a structural break </span>}
- at { breakPoints }.
+ It looks like your data has
+ { breaks.length > 1 && <span> structural breaks </span>}
+ { breaks.length == 1 && <span> a structural break </span>}
+ at { breakPoints }.
</InsightText>
)
}
}
-const stationaryDefinition = "Mean does not change with time."
+const stationaryDefinition = t`Mean does not change with time.`
const stationaryLink = "https://en.wikipedia.org/wiki/Stationary_process"
export class StationaryInsight extends Component {
static insightType = "stationary"
- static title = "Stationary data"
+ static title = t`Stationary data`
static icon = "insight"
render() {
- return (
- <InsightText>
+ return (
+ <InsightText>
Your data looks to be <TermWithDefinition definition={stationaryDefinition} link={stationaryLink}>
stationary
</TermWithDefinition>.
@@ -282,7 +280,7 @@ export class StationaryInsight extends Component {
export class TrendInsight extends Component {
static insightType = "trend"
- static title = "Trend"
+ static title = t`Trend`
static icon = "insight"
render() {
@@ -290,38 +288,12 @@ export class TrendInsight extends Component {
return(
<InsightText>
- Your data seems to be { mode } { shape }.
+ { jt`Your data seems to be ${ mode } ${ shape }.` }
</InsightText>
)
}
}
-/*
-export class RegimeChangeInsight extends Component {
- static insightType = "regime-change"
- static title = "Regime change"
- static icon = "insight"
- getTextForBreak = ({ from, to, mode, shape }) => {
- let { resolution } = this.props
- resolution = resolution || "year"
- if (from === "beginning") return `${mode} ${shape} period until ${formatTimeWithUnit(to, resolution)}`
- if (to === "now") return `${mode} ${shape} period from ${formatTimeWithUnit(from, resolution)} until now`
- return `${mode} ${shape} period from ${formatTimeWithUnit(from, resolution)} until now`
- }
- render() {
- let { breaks } = this.props
- return (
- <p>
- Your data can be split into { breaks.length } { inflect("stages", breaks.length) }:
- <span> </span>
- { formatListOfItems(breaks.map(this.getTextForBreak)) }.
- </p>
- )
- }
-}
-*/
-
-
const INSIGHT_COMPONENTS = [
// any field
NilsInsight,
@@ -338,7 +310,6 @@ const INSIGHT_COMPONENTS = [
StructuralBreaksInsight,
StationaryInsight,
TrendInsight,
- // RegimeChangeInsight
]
export const InsightCard = ({type, props, features}) => {
--
GitLab