Core plugins

• Color
• Latex
• LineChart
• Markdown
• Mermaid
• PieChart
• ReactComponent
• Regex
• Table
• Test

Color

Usage

console.render('Hex', '#FF5300')
console.render('RGB', {
  r: 255,
  g: 83,
  b: 0
})
console.render('HSL', {
  h: 20,
  s: 1,
  l: 0.5
})

Prop types

Color.propTypes = {
  data: PropTypes.oneOfType([
    (props, propName, componentName) => {
      if (typeof props[propName] !== 'string' || !/#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(props[propName])) return new Error('Validation failed!')
      return null
    },
    PropTypes.shape({
      r: PropTypes.number.isRequired,
      g: PropTypes.number.isRequired,
      b: PropTypes.number.isRequired,
      a: PropTypes.number
    }),
    PropTypes.shape({
      h: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
      s: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
      l: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
      a: PropTypes.number
    })
  ]).isRequired
}

Latex

Usage

console.render('Square root', `$$c = \\sqrt{a^2 + b^2}$$`)
console.render('Function', `$$F(k) = \\int_{-\\infty}^{\\infty} f(x) e^{2\pi i k} dx$$`)

Prop types

Latex.propTypes = {
  data: (props, propName, componentName) => {
    if (!/\$\$[\s\S]+?\$\$|\$[\s\S]+?\$/g.test(props[propName])) return new Error('Validation failed!')
    return null
  }
}

LineChart

Usage

console.render('Sine wave line chart', [
  {
    y: '(data) => Math.sin(2 * Math.PI * data.x)',
    style: {
      data: {
        stroke: 'red'
      }
    }
  }
])

Prop types

LineChart.propTypes = {
  data: PropTypes.arrayOf(React.PropTypes.oneOfType([
    PropTypes.shape({
      y: PropTypes.string.isRequired
    }),
    PropTypes.shape({
      data: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.number)).isRequired
    })
  ])).isRequired
}

Markdown

Usage

console.render(`# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
`)

Prop types

Markdown.propTypes = {
  data: PropTypes.string.isRequired
}

Mermaid

Usage

console.render('Sequence diagram', `sequenceDiagram
  participant Alice
  participant Bob
  Alice->>John: Hello John, how are you?
  loop Healthcheck
      John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts <br/>prevail...
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!`)

Prop types

Mermaid.propTypes = {
  data: (props, propName, componentName) => {
    if (!/^(sequenceDiagram|graph|gantt)/.test(props[propName])) return new Error('Validation failed!')
    return null
  }
}

PieChart

Usage

console.render('### Simple animals', {
  type: 'PieChart',
  data: [
    {
      data: [
        {x: 'Cat', y: 62},
        {x: 'Dog', y: 91},
        {x: 'Fish', y: 55},
        {x: 'Bird', y: 55}
      ]
    }
  ]
})
console.render('### Dynamic animals', {
  type: 'PieChart',
  data: [
    {
      data: [
        {animal: 'Cat', pet: 45, wild: 17},
        {animal: 'Dog', pet: 85, wild: 6},
        {animal: 'Fish', pet: 55, wild: 0},
        {animal: 'Bird', pet: 15, wild: 40}
      ],
      x: 'animal',
      y:'data => data.pet + data.wild',
      animate: {velocity: 0.02}
    }
  ]
})

Prop types

PieChart.propTypes = {
  data: PropTypes.arrayOf(React.PropTypes.oneOfType([
    PropTypes.shape({
      y: PropTypes.string.isRequired
    }),
    PropTypes.shape({
      data: PropTypes.arrayOf(PropTypes.object).isRequired
    })
  ])).isRequired
}

ReactComponent

Usage

console.render('## EditableTable', {
  type: 'ReactComponent',
  data: {
    path: path.join(__dirname, 'ReactComponent', 'EditableTable.js'),
    props: {
      data: [
        {
          key: 1,
          value: 'one'
        },
        {
          key: 2,
          value: 'two'
        },
        {
          key: 3,
          value: 'three'
        }
      ],
      handleSelect: '(rows) => console.log(rows)'
    }
  }
})

Prop types

ReactComponent.propTypes = {
  data: PropTypes.shape({
    path: PropTypes.string.isRequired,
    props: PropTypes.object
  }).isRequired
}

Regex

Usage

console.render('All characters', /.*/)
console.render('All alphanumeric characters', /[A-z]+/)

Prop types

Regex.propTypes = {
  data: (props, propName, componentName) => {
    if (!/^\/.*\/[gimy]?$/.test(props[propName])) return new Error('Validation failed!')
    return null
  }
}

Table

Usage

console.render('Simple table', [
  {
    key: 1,
    value: 'one'
  },
  {
    key: 2,
    value: 'two'
  },
  {
    key: 3,
    value: 'three'
  }
])

Prop types

Table.propTypes = {
  data: PropTypes.arrayOf(PropTypes.object).isRequired
}

Test

Usage

try {
  console.render('Passed', assert(1 + 2 === 3))
} catch (error) {
  console.render('Failed', error)
}

Prop types

Test.propTypes = {
  data: PropTypes.oneOfType([
    // Error type
    (props, propName, componentName) => {
      if (!(props[propName] instanceof Error)) return new Error('Validation failed!')
      return null
    },
    // Error string
    (props, propName, componentName) => {
      if (!/Error/.test(props[propName])) return new Error('Validation failed!')
      return null
    },
    PropTypes.bool,
    // Boolean string
    (props, propName, componentName) => {
      if (!/true|false/i.test(props[propName])) return new Error('Validation failed!')
      return null
    },
    // Undefined type/string
    (props, propName, componentName) => {
      if (typeof props[propName] !== 'undefined' && props[propName] !== 'undefined') return new Error('Validation failed!')
      return null
    },
    PropTypes.shape({
      message: PropTypes.string.isRequired,
      stack: PropTypes.string.isRequired
    })
  ]).isRequired
}