i18n

src/alluvialdiagram/dimensions.js

@@ -1,15 +1,17 @@
+import { t } from '@rawgraphs/rawgraphs-core'
+
 export const dimensions = [
   {
     id: 'steps',
-    name: 'Steps',
+    name: t('dimensions.steps'),
     validTypes: ['number', 'date', 'string'],
     required: true,
     multiple: true,
     minValues: 2,
   },
   {
     id: 'size',
-    name: 'Size',
+    name: t('dimensions.size'),
     validTypes: ['number'],
     required: false,
     aggregation: true,

src/alluvialdiagram/metadata.js

@@ -1,3 +1,4 @@
+import { t } from '@rawgraphs/rawgraphs-core'
 import icon from './alluvialdiagram.svg'
 import thumbnail from './alluvialdiagram_thumb.svg'
 
@@ -9,7 +10,6 @@ export const metadata = {
   code:
     'https://github.com/rawgraphs/rawgraphs-charts/tree/master/src/alluvialdiagram',
   tutorial: 'https://rawgraphs.io/learning/how-to-make-an-alluvial-diagram/',
-  categories: ['correlations', 'proportions'],
-  description:
-    'It shows correlations between categorical dimensions representing them as flows, visually linking categories with shared items. Each rectangle represents a unique value in the selected dimension, its height is proportional to its value. Correlations are represented with curved lines whose width is proportional to their value.',
+  categories: [t('categories.correlations'), t('categories.proportions')],
+  description: t('charts.alluvialdiagram.description'),
 }

src/alluvialdiagram/visualOptions.js

@@ -1,99 +1,102 @@
+import { t } from '@rawgraphs/rawgraphs-core'
+
 export const visualOptions = {
   marginTop: {
     type: 'number',
-    label: 'Margin (top)',
+    label: t('visualOptions.marginTop'),
     default: 10,
     group: 'artboard',
   },
-
   marginRight: {
     type: 'number',
-    label: 'Margin (right)',
+    label: t('visualOptions.marginRight'),
     default: 10,
     group: 'artboard',
   },
-
   marginBottom: {
     type: 'number',
-    label: 'Margin (bottom)',
+    label: t('visualOptions.marginBottom'),
     default: 10,
     group: 'artboard',
   },
-
   marginLeft: {
     type: 'number',
-    label: 'Margin (left)',
+    label: t('visualOptions.marginLeft'),
     default: 10,
     group: 'artboard',
   },
-
   nodesWidth: {
     type: 'number',
-    label: 'Nodes width',
+    label: t('visualOptions.nodesWidth'),
     default: 5,
     group: 'chart',
   },
-
   nodesPadding: {
     type: 'number',
-    label: 'Padding',
+    label: t('visualOptions.nodesPadding'),
     default: 5,
     group: 'chart',
   },
-
   linksOpacity: {
     type: 'number',
-    label: 'Links opacity (0-1)',
+    label: t('visualOptions.linksOpacity'),
     default: 1,
     step: 0.1,
     min: 0,
     max: 1,
     group: 'chart',
   },
-
   linksBlendMode: {
     type: 'text',
-    label: 'Links blend mode',
+    label: t('visualOptions.linksBlendMode'),
     group: 'chart',
     options: ['normal', 'multiply'],
     default: 'multiply',
   },
-
   sortNodesBy: {
     type: 'text',
-    label: 'Sort nodes by',
+    label: t('visualOptions.sortNodesBy'),
     group: 'chart',
     options: [
-      { label: 'Size (descending)', value: 'sizeDescending' },
-      { label: 'Size (ascending)', value: 'sizeAscending' },
-      { label: 'Name', value: 'name' },
-      { label: 'Minimize Overlaps', value: 'auto' },
+      {
+        label: t('visualOptions.sortNodesByOptions.sizeDescending'),
+        value: 'sizeDescending',
+      },
+      {
+        label: t('visualOptions.sortNodesByOptions.sizeAscending'),
+        value: 'sizeAscending',
+      },
+      {
+        label: t('visualOptions.sortNodesByOptions.name'),
+        value: 'name',
+      },
+      {
+        label: t('visualOptions.sortNodesByOptions.auto'),
+        value: 'auto',
+      },
     ],
     default: 'sizeAscending',
   },
-
   verticalAlignment: {
     type: 'text',
-    label: 'Flows alignment',
+    label: t('visualOptions.verticalAlignment'),
     group: 'chart',
     options: ['Top', 'Center', 'Bottom'],
     default: 'Center',
   },
-
   colorScale: {
     type: 'colorScale',
-    label: 'Color scale',
+    label: t('visualOptions.colorScale'),
     dimension: 'source',
     default: {
       scaleType: 'ordinal',
       interpolator: 'interpolateSpectral',
     },
     group: 'colors',
   },
-
   showValues: {
     type: 'boolean',
-    label: 'Show nodes values',
+    label: t('visualOptions.showValues'),
     default: false,
     group: 'Labels',
   },

src/arcdiagram/dimensions.js

@@ -1,19 +1,21 @@
+import { t } from '@rawgraphs/rawgraphs-core'
+
 export const dimensions = [
   {
     id: 'source',
-    name: 'Source node',
+    name: t('dimensions.sourceNode'),
     validTypes: ['number', 'date', 'string'],
     required: true,
   },
   {
     id: 'target',
-    name: 'Target node',
+    name: t('dimensions.targetNode'),
     validTypes: ['number', 'date', 'string'],
     required: true,
   },
   {
     id: 'size',
-    name: 'Size',
+    name: t('dimensions.size'),
     validTypes: ['number'],
     required: false,
     aggregation: true,

src/arcdiagram/metadata.js

@@ -1,3 +1,4 @@
+import { t } from '@rawgraphs/rawgraphs-core'
 import icon from './arcdiagram.svg'
 import thumbnail from './arcdiagram_thumb.svg'
 
@@ -6,9 +7,8 @@ export const metadata = {
   id: 'rawgraphs.arcdiagram',
   thumbnail,
   icon,
-  categories: ['networks'],
-  description:
-    'A particular kind of network graph, allows seeing relationships among nodes. Nodes are displayed on the horizontal axis, and links as clockwise arcs. An arc above the nodes means a connection from the left to the right, while below means a connection from the right node to the left one.',
+  categories: [t('categories.networks')],
+  description: t('charts.arcdiagram.description'),
   code:
     'https://github.com/rawgraphs/rawgraphs-charts/tree/master/src/arcdiagram',
   tutorial: 'https://rawgraphs.io/learning/how-to-make-an-arc-diagram/',

src/arcdiagram/visualOptions.js

@@ -1,82 +1,96 @@
+import { t } from '@rawgraphs/rawgraphs-core'
+
 export const visualOptions = {
   marginTop: {
     type: 'number',
-    label: 'Margin (top)',
+    label: t('visualOptions.marginTop'),
     default: 10,
     group: 'artboard',
   },
-
   marginRight: {
     type: 'number',
-    label: 'Margin (right)',
+    label: t('visualOptions.marginRight'),
     default: 10,
     group: 'artboard',
   },
-
   marginBottom: {
     type: 'number',
-    label: 'Margin (bottom)',
+    label: t('visualOptions.marginBottom'),
     default: 10,
     group: 'artboard',
   },
-
   marginLeft: {
     type: 'number',
-    label: 'Margin (left)',
+    label: t('visualOptions.marginLeft'),
     default: 10,
     group: 'artboard',
   },
-
   minDiameter: {
     type: 'number',
-    label: 'Min diameter',
+    label: t('visualOptions.minDiameter'),
     default: 2,
     group: 'chart',
   },
-
   maxDiameter: {
     type: 'number',
-    label: 'Max diameter',
+    label: t('visualOptions.maxDiameter'),
     default: 30,
     group: 'chart',
   },
-
   linkOpacity: {
     type: 'number',
-    label: 'Links opacity (0-1)',
+    label: t('visualOptions.linkOpacity'),
     default: 0.5,
     step: 0.1,
     min: 0,
     max: 1,
     group: 'chart',
   },
-
   sameSide: {
     type: 'boolean',
-    label: 'Arcs only on the top',
+    label: t('visualOptions.sameSide'),
     default: false,
     group: 'chart',
   },
-
   nodeSize: {
     type: 'text',
-    label: 'Nodes diameter',
+    label: t('visualOptions.nodeSize'),
     group: 'chart',
     options: [
-      { label: 'Same size', value: 'default' },
-      { label: 'Weighted degree', value: 'totalValue' },
-      { label: 'Weighted inDegree', value: 'inValue' },
-      { label: 'Weighted outDegree', value: 'outValue' },
-      { label: 'Links count', value: 'degree' },
-      { label: 'OutDegree', value: 'outDegree' },
-      { label: 'InDegree', value: 'inDegree' },
+      {
+        label: t('visualOptions.nodeSizeOptions.default'),
+        value: 'default',
+      },
+      {
+        label: t('visualOptions.nodeSizeOptions.totalValue'),
+        value: 'totalValue',
+      },
+      {
+        label: t('visualOptions.nodeSizeOptions.inValue'),
+        value: 'inValue',
+      },
+      {
+        label: t('visualOptions.nodeSizeOptions.outValue'),
+        value: 'outValue',
+      },
+      {
+        label: t('visualOptions.nodeSizeOptions.degree'),
+        value: 'degree',
+      },
+      {
+        label: t('visualOptions.nodeSizeOptions.outDegree'),
+        value: 'outDegree',
+      },
+      {
+        label: t('visualOptions.nodeSizeOptions.inDegree'),
+        value: 'inDegree',
+      },
     ],
     default: 'totalValue',
   },
-
   orderNodesBy: {
     type: 'text',
-    label: 'Sort nodes by',
+    label: t('visualOptions.orderNodesBy'),
     group: 'chart',
     options: ['Name', 'Links count (degree)', 'Size', 'Minimize overlaps'],
     default: 'Minimize overlaps',

src/barchart/dimensions.js

@@ -1,25 +1,25 @@
+import { t } from '@rawgraphs/rawgraphs-core'
+
 export const dimensions = [
   {
     id: 'bars',
-    name: 'Bars',
+    name: t('dimensions.bars'),
     validTypes: ['number', 'string', 'date'],
     required: true,
     operation: 'get',
   },
-
   {
     id: 'size',
-    name: 'Size',
+    name: t('dimensions.size'),
     operation: 'get',
     validTypes: ['number'],
     required: false,
     aggregation: true,
     aggregationDefault: 'sum',
   },
-
   {
     id: 'color',
-    name: 'Color',
+    name: t('dimensions.color'),
     operation: 'get',
     validTypes: ['number', 'string', 'date'],
     required: false,
@@ -30,10 +30,9 @@ export const dimensions = [
       date: 'csvDistinct',
     },
   },
-
   {
     id: 'series',
-    name: 'Series',
+    name: t('dimensions.series'),
     validTypes: ['number', 'string', 'date'],
     required: false,
     operation: 'get',

src/barchart/metadata.js

@@ -1,3 +1,4 @@
+import { t } from '@rawgraphs/rawgraphs-core'
 import icon from './barchart.svg'
 import thumbnail from './barchart_thumb.svg'
 
@@ -6,9 +7,8 @@ export const metadata = {
   thumbnail,
   icon,
   id: 'rawgraphs.barchart',
-  categories: ['correlations'],
-  description:
-    'It displays a categorical dimension and related amounts. Each bar represents a category, width is proportional to the quantitative dimension.',
+  categories: [t('categories.correlations')],
+  description: t('charts.barchart.description'),
   code:
     'https://github.com/rawgraphs/rawgraphs-charts/tree/master/src/barchart',
   tutorial: 'https://rawgraphs.io/learning/how-to-make-a-barchart/',