A web UI for creating, editing and validating Data Packages.
JavaScript HTML CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
data
dist
e2e
src
test Fix bug where resource.schema.fields[]._key wasn't being deleted Apr 6, 2018
.babelrc
.eslintrc Update License and Author fields to DataPackage v1 Mar 21, 2018
.gitignore Ignore Emacs temporary files Mar 16, 2018
.nycrc Fixed travis build and all chore stuff Dec 8, 2017
.travis.yml
CNAME Create CNAME Jan 25, 2018
README.md Updated to React 16 (dropped react-lite - size difference is too small Nov 16, 2017
index.html
karma.conf.js Derived from goodtables-ui Nov 14, 2017
nightwatch.conf.js
package-lock.json [#256] Remove all empty values from descriptor Apr 3, 2018
package.json [#256] Remove all empty values from descriptor Apr 3, 2018
rune2e.js Derived from goodtables-ui Nov 14, 2017
webpack.config.js Added package validation Nov 25, 2017

README.md

datapackage-ui

Travis Coveralls

Saucelabs

UI for datapackage as a framework-agnostic browser components (DEMO).

Features

  • render - framework-agnostic component render
  • List of components: TBD

Getting Started

You could use this components in plain JavaScript code or mixing with any modern framework (with native support for React). To render report you have use datapackageUI.render(datapackageUI.<Component>, props, element) function.

First add bootstrap and component styles:

  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="//unpkg.com/datapackage-ui/dist/datapackage-ui.min.css">

Installation

NPM

Install the package in your terminal $ npm install --save datapackage-ui

The package could be used as datapackage-ui package from NPM:

import datapackageUI from 'datapackage-ui'

const props = '<YOUR-PROPS>'
const element = document.getElementById('component')
datapackageUI.render(datapackageUI.Component, {...props}, element)

CDN

The distribution is 60kb minified (20kb gzipped) with no dependencies.

The package could be used as pluggable script from CDN:

<div id="report"></div>
<script src="//unpkg.com/datapackage-ui/dist/datapackage-ui.min.js"></script>
<script>
  var props = '<YOUR-PROPS>'
  var element = document.getElementById('component')
  datapackageUI.render(datapackageUI.Component, {...props}, element)
</script>

Examples

React

In this case your application should provide react and react-dom.

You could use presented components as native React component (import from datapackage-ui/lib to get native React support):

import React from 'react'
import ReactDOM from 'react-dom'
import datapackageUI from 'datapackage-ui/lib'

const props = '<YOUR-PROPS>'
const element = document.getElementById('component')
ReactDOM.render(<datapackageUI.Component ...props />, element)

Angular

This example is for Angular2+. Use similliar approach for Angular1.

The package's components could be used as angular component:

import {Component, Input} from '@angular/core';
import datapackageUI from 'datapackageUI'

@Component({
  selector: 'component',
  template: '<div id="component"></div>'
})
class Report {
  @Input() <YOUR_PROPS>: any;
  ngAfterViewInit() {
    const element = document.getElementById('component')
    datapackageUI.render(datapackageUI.Component, {...this.props}, element)
  }
}

Vue

This example is for Vue2+. Use similar approach for Vue1.

The package's components could be used as vue component:

import datapackageUI from 'datapackageUI'

const Report = {
  props: [<YOUR_PROPS>],
  template: '<div id="component"></div>',
  mounted() {
    const element = document.getElementById('component')
    datapackageUI.render(datapackageUI.Report, {...this.props}, element)
  },
}

Documentation

The whole public API of this package is described here and follows semantic versioning rules. Everything outside of this readme are private API and could be changed without any notification on any new version.

Render

To render one of the provided component render function should be used.

render(component, props, element)

  • component (Component) - it could be one of provided by the library component
  • props (Object) - object containing props
  • element (Element) - DOM element to render into

Contributing

The project follows the Open Knowledge International coding standards. There are common commands to work with the project:

$ npm run dev
$ npm run build
$ npm run test

Changelog

Here described only breaking and the most important changes. The full changelog and documentation for all released versions could be found in nicely formatted commit history.

v0.1

Initial version.