Compare commits
No commits in common. "master" and "addNodeServer" have entirely different histories.
master
...
addNodeSer
1
.github/FUNDING.yml
vendored
1
.github/FUNDING.yml
vendored
@ -1 +0,0 @@
|
||||
github: [joshuashoemaker]
|
||||
15
README.md
15
README.md
@ -1,15 +0,0 @@
|
||||
# <img alt="data lovelace logo" src="./public/favicon.png" width="30px"/> [dataLovelace.app](https://datalovelace.app)
|
||||
|
||||
[💛 Support this Project 💛](https://github.com/sponsors/joshuashoemaker/)
|
||||
|
||||
Lovelace is a simple to use web application that puts the power of data reporting into the hands of those who need it for free. It is a Free and Open Source Software (FOSS) project.
|
||||
|
||||
With Lovelace you can take all of your varying data sources, aggregate them to one place, and perform what ever kind of reports on them you need to either create beautiful chart representations, or robust tabular exports of your data.
|
||||
|
||||
|
||||
|
||||
### [Read the Documentation](https://docs.datalovelace.app)
|
||||
|
||||
or
|
||||
|
||||
### [Jump Right In](https://datalovelace.app) and play with the tool yourself
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 192 KiB |
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "datalovelace",
|
||||
"name": "lovelace.technology",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="With Lovelace you can take all of your varying data sources, aggregate them to one place, and perform what ever kind of reports on them you need to either create beautiful chart representations, or a robust tabular export of your data."
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
{
|
||||
"short_name": "Lovelace",
|
||||
"name": "datalovelace.app",
|
||||
"description": "With Lovelace you can take all of your varying data sources, aggregate them to one place, and perform what ever kind of reports on them you need to either create beautiful chart representations, or a robust tabular export of your data.",
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.png",
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "favicon.png",
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "favicon.png",
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
|
||||
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="16px" height="16px"><path fill="#f78f8f" d="M76.993,77.479c-4.54-0.181-9.738-1.562-14.762-3.935l-0.193-0.091L61.84,73.53 C58.411,74.837,54.764,75.5,51,75.5c-14.612,0-26.5-10.094-26.5-22.5S36.388,30.5,51,30.5S77.5,40.594,77.5,53 c0,5.191-2.134,10.258-6.009,14.266l-0.242,0.251L71.4,67.83C73.215,71.602,75.094,74.842,76.993,77.479z"/><path fill="#c74343" d="M51,31c14.336,0,26,9.869,26,22c0,5.061-2.084,10.004-5.869,13.918l-0.484,0.501l0.302,0.628 c1.637,3.402,3.327,6.377,5.04,8.873c-4.223-0.329-8.954-1.659-13.545-3.827l-0.385-0.182l-0.398,0.152 C58.29,74.348,54.703,75,51,75c-14.336,0-26-9.869-26-22S36.664,31,51,31 M51,30c-14.912,0-27,10.297-27,23 c0,12.703,12.088,23,27,23c3.926,0,7.652-0.72,11.017-2.003C67.105,76.4,72.814,78,78,78c-2.352-3.098-4.402-6.754-6.15-10.387 C75.692,63.64,78,58.55,78,53C78,40.297,65.912,30,51,30L51,30z"/><path fill="#fff" d="M61.534,62.538h-5.33l-1.545-4.83h-7.723l-1.529,4.83h-5.3l7.904-21.714h5.8L61.534,62.538z M53.539,53.952c0,0-2.625-8.495-2.695-9.252h-0.121c-0.05,0.636-2.741,9.252-2.741,9.252H53.539z"/><path fill="#8bb7f0" d="M3.007,49.479c1.899-2.638,3.778-5.878,5.593-9.649l0.151-0.313l-0.242-0.251 C4.634,35.258,2.5,30.191,2.5,25C2.5,12.594,14.388,2.5,29,2.5S55.5,12.594,55.5,25S43.612,47.5,29,47.5 c-3.764,0-7.411-0.663-10.84-1.97l-0.198-0.076l-0.193,0.091C12.745,47.918,7.547,49.299,3.007,49.479z"/><path fill="#4e7ab5" d="M29,3c14.336,0,26,9.869,26,22S43.336,47,29,47c-3.703,0-7.29-0.652-10.661-1.937l-0.398-0.152 l-0.385,0.182c-4.591,2.168-9.322,3.498-13.545,3.827c1.712-2.496,3.403-5.471,5.04-8.873l0.302-0.628l-0.484-0.501 C5.084,35.004,3,30.061,3,25C3,12.869,14.664,3,29,3 M29,2C14.088,2,2,12.297,2,25c0,5.55,2.308,10.64,6.15,14.613 C6.402,43.246,4.352,46.902,2,50c5.186,0,10.895-1.6,15.983-4.003C21.348,47.28,25.074,48,29,48c14.912,0,27-10.297,27-23 C56,12.297,43.912,2,29,2L29,2z"/><g><path fill="#fff" d="M28.534,35.965c-2.986,0-5.42-1.077-7.301-3.232c-1.881-2.176-2.822-4.993-2.822-8.452 c0-3.652,0.955-6.615,2.865-8.888c1.9-2.262,4.431-3.394,7.592-3.394c2.977,0,5.381,1.083,7.214,3.248 c1.842,2.155,2.763,5.01,2.763,8.565c0,3.631-0.955,6.566-2.865,8.807c-0.068,0.075-0.131,0.148-0.189,0.218 c-0.058,0.07-0.121,0.137-0.189,0.202l5.279,5.64h-6.574l-2.763-3.119C30.634,35.831,29.63,35.965,28.534,35.965z M28.738,16.493 c-1.639,0-2.948,0.689-3.927,2.068c-0.97,1.368-1.454,3.184-1.454,5.446c0,2.295,0.485,4.11,1.454,5.446 c0.97,1.336,2.24,2.004,3.811,2.004c1.619,0,2.904-0.646,3.854-1.939c0.95-1.314,1.425-3.119,1.425-5.414 c0-2.392-0.461-4.261-1.382-5.608C31.608,17.16,30.348,16.493,28.738,16.493z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="50px" height="50px"><circle cx="77" cy="13" r="1" fill="#f1bc19"/><circle cx="50" cy="50" r="37" fill="#e6edb7"/><circle cx="83" cy="15" r="4" fill="#f1bc19"/><circle cx="87" cy="24" r="2" fill="#88ae45"/><circle cx="81" cy="76" r="2" fill="#fbcd59"/><circle cx="15" cy="63" r="4" fill="#fbcd59"/><circle cx="25" cy="87" r="2" fill="#88ae45"/><circle cx="18.5" cy="51.5" r="2.5" fill="#fff"/><circle cx="79.5" cy="33.5" r="1.5" fill="#fff"/><g><path fill="#f4989e" d="M37.084,74.3c-0.212,0-0.384-0.172-0.384-0.384v-4.832c0-0.212,0.172-0.384,0.384-0.384h5.724 c1.044,0,1.893-0.849,1.893-1.893V46.192c0-1.044-0.849-1.893-1.893-1.893h-3.724c-0.212,0-0.384-0.172-0.384-0.384v-4.832 c0-0.212,0.172-0.384,0.384-0.384h16.832c0.212,0,0.384,0.172,0.384,0.384v27.724c0,1.044,0.849,1.893,1.893,1.893h6.724 c0.212,0,0.384,0.172,0.384,0.384v4.832c0,0.212-0.172,0.384-0.384,0.384H37.084z"/><path fill="#472b29" d="M55.6,39.4V41v4v21.808c0,1.429,1.163,2.592,2.593,2.592H64.6v4.2H37.4v-4.2h5.407 c1.43,0,2.593-1.163,2.593-2.592V46.192c0-1.429-1.163-2.592-2.593-2.592H39.4v-4.2H55.6 M55.916,38H39.084 C38.485,38,38,38.485,38,39.084v4.832C38,44.515,38.485,45,39.084,45h3.724C43.466,45,44,45.534,44,46.192v20.615 C44,67.466,43.466,68,42.807,68h-5.724C36.485,68,36,68.485,36,69.084v4.832C36,74.515,36.485,75,37.084,75h27.832 C65.515,75,66,74.515,66,73.916v-4.832C66,68.485,65.515,68,64.916,68h-6.724C57.534,68,57,67.466,57,66.808V45v-4v-1.916 C57,38.485,56.515,38,55.916,38L55.916,38z"/><g><ellipse cx="49.5" cy="27.5" fill="#f4989e" rx="6.8" ry="5.8"/><path fill="#472b29" d="M49.5,22.4c3.364,0,6.1,2.288,6.1,5.1s-2.736,5.1-6.1,5.1s-6.1-2.288-6.1-5.1 S46.136,22.4,49.5,22.4 M49.5,21c-4.142,0-7.5,2.91-7.5,6.5s3.358,6.5,7.5,6.5s7.5-2.91,7.5-6.5S53.642,21,49.5,21L49.5,21z"/></g></g><g><path fill="#472b29" d="M62.5,71.25h-5.292c-2.183,0-3.958-1.775-3.958-3.958V63c0-0.138,0.112-0.25,0.25-0.25 s0.25,0.112,0.25,0.25v4.292c0,1.907,1.551,3.458,3.458,3.458H62.5c0.138,0,0.25,0.112,0.25,0.25S62.638,71.25,62.5,71.25z"/></g><g><path fill="#472b29" d="M53.5,60.667c-0.138,0-0.25-0.112-0.25-0.25V41.75h-2.167c-0.138,0-0.25-0.112-0.25-0.25 s0.112-0.25,0.25-0.25h2.667v19.167C53.75,60.555,53.638,60.667,53.5,60.667z"/></g><g><path fill="#472b29" d="M49.167,41.75H46.25c-0.138,0-0.25-0.112-0.25-0.25s0.112-0.25,0.25-0.25h2.917 c0.138,0,0.25,0.112,0.25,0.25S49.305,41.75,49.167,41.75z"/></g><g><path fill="#472b29" d="M44.25,41.75H41.5c-0.138,0-0.25-0.112-0.25-0.25s0.112-0.25,0.25-0.25h2.75 c0.138,0,0.25,0.112,0.25,0.25S44.388,41.75,44.25,41.75z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 2.5 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="16px" height="16px"><path fill="#efd476" d="M39.1,69.3l23.4-11.7c2.6-1.3,4.2-4.6,3.2-7.4c-0.9-2.3-3.1-3.7-5.4-3.7c-0.7,0-1.5,0.1-2.2,0.4 L39,54.8"/><path fill="#c59b3f" d="M39.4,69.8L39,68.9l23.4-11.7c2.5-1.2,3.8-4.3,2.9-6.7c-0.8-2.1-2.7-3.4-4.9-3.4 c-0.7,0-1.4,0.1-2,0.4l-19.1,7.9l-0.4-0.9L58,46.6c0.8-0.3,1.6-0.5,2.4-0.5c2.6,0,4.9,1.6,5.8,4c1.1,2.9-0.5,6.6-3.4,8L39.4,69.8z"/><path fill="#efd476" d="M45.1,71.3l23.4-11.7c2.6-1.3,4.2-4.6,3.2-7.4c-0.9-2.3-3.1-3.7-5.4-3.7c-0.7,0-1.5,0.1-2.2,0.4 L45,56.8"/><path fill="#c59b3f" d="M45.4,71.8L45,70.9l23.4-11.7c2.5-1.2,3.8-4.3,2.9-6.7c-0.8-2.1-2.7-3.4-4.9-3.4 c-0.7,0-1.4,0.1-2,0.4l-19.1,7.9l-0.4-0.9L64,48.6c0.8-0.3,1.6-0.5,2.4-0.5c2.6,0,4.9,1.6,5.8,4c1.1,2.9-0.5,6.6-3.4,8L45.4,71.8z"/><path fill="#ffee9f" d="M48.2,73.5c-0.9,0-1.7-0.2-2.5-0.6L15.6,59.1L2.5,64.4V43.7l11.1-4.1c2-0.7,4-1.1,6.1-1.1 c2.9,0,5.7,0.7,8.2,2l19.1,10c2.6,1.4,3.6,4.6,2.3,7.2l-0.2,0.4l1.7,1.2l19.4-8c0.6-0.3,1.3-0.4,2-0.4c2.2,0,4.1,1.3,4.9,3.4 c0.9,2.4-0.4,5.5-2.9,6.7L50.9,72.9C50.1,73.3,49.1,73.5,48.2,73.5z"/><path fill="#c59b3f" d="M19.8,39c2.8,0,5.5,0.7,8,2l19.1,10c2.4,1.2,3.3,4.2,2.1,6.6l-0.4,0.8l0.7,0.5l1.2,0.8l0.4,0.3 l0.5-0.2l19.2-7.9c0.6-0.2,1.2-0.4,1.8-0.4c2,0,3.7,1.2,4.4,3.1c0.8,2.2-0.4,5-2.7,6.1L50.7,72.4c-0.8,0.4-1.6,0.6-2.5,0.6 c-0.8,0-1.6-0.2-2.3-0.5L16,58.8l-0.4-0.2l-0.4,0.2L3,63.6V44.1l10.8-4C15.7,39.4,17.7,39,19.8,39 M19.8,38c-2.1,0-4.3,0.4-6.3,1.1 L2,43.4v21.7l13.6-5.4l29.9,13.7c0.9,0.4,1.8,0.6,2.7,0.6c1,0,2-0.2,2.9-0.7l23.4-11.7c2.6-1.3,4.2-4.6,3.2-7.4 c-0.9-2.3-3.1-3.7-5.4-3.7c-0.7,0-1.5,0.1-2.2,0.4L51,58.8L49.8,58c1.5-2.9,0.3-6.4-2.5-7.9l-19.1-10C25.6,38.7,22.7,38,19.8,38 L19.8,38z"/><path fill="#c59b3f" d="M45.7,60.6c-0.7,0-1.4-0.2-2-0.5l-12.3-6.2l0.5-0.9l12.3,6.2c1.6,0.8,3.7,0.2,4.6-1.4l0.9,0.5 C48.8,59.8,47.3,60.6,45.7,60.6z"/><g><path fill="#ffee9f" d="M3.7 43.8L2 44.5 2 64 3.7 63.4z"/></g><g><path fill="#ff8f8f" d="M48,37.394C45.74,35.831,30.5,24.95,30.5,16c0-5.505,3.866-9.5,9.192-9.5 c3.238,0,5.678,1.326,7.907,4.3l0.4,0.534l0.4-0.534c2.229-2.974,4.669-4.3,7.907-4.3c5.326,0,9.192,3.995,9.192,9.5 C65.5,24.953,50.261,35.831,48,37.394z"/><path fill="#e54141" d="M56.308,7C61.344,7,65,10.785,65,16c0,8.395-14.013,18.687-17,20.785C45.011,34.687,31,24.401,31,16 c0-5.215,3.656-9,8.692-9c3.107,0,5.353,1.226,7.508,4.1l0.8,1.067l0.8-1.067C50.955,8.226,53.201,7,56.308,7 M56.308,6 C52.776,6,50.25,7.5,48,10.5c-2.25-3-4.776-4.5-8.308-4.5C34.339,6,30,10,30,16c0,10,18,22,18,22s18-12,18-22 C66,10,61.661,6,56.308,6L56.308,6z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 2.5 KiB |
@ -1,7 +0,0 @@
|
||||
.chartLabel {
|
||||
text-align: center;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.saveChartAsImageButton {
|
||||
}
|
||||
@ -3,7 +3,6 @@ import FocusChart from '../../Models/Chart/FocusChart'
|
||||
import { Doughnut, Bar, Line, Pie, Polar, Radar, Scatter, Bubble } from 'react-chartjs-2'
|
||||
import { Button } from 'semantic-ui-react'
|
||||
import download from 'downloadjs'
|
||||
import './ChartViewer.css'
|
||||
|
||||
class ChartViewer extends Component {
|
||||
constructor () {
|
||||
@ -18,11 +17,6 @@ class ChartViewer extends Component {
|
||||
document.addEventListener('setSelectedChart', this.setFocusChart)
|
||||
}
|
||||
|
||||
closeChart = () => {
|
||||
this.focusChart.chart = null
|
||||
this.setFocusChart()
|
||||
}
|
||||
|
||||
handleGroupByChange = (e, value) => {
|
||||
this.setState({ reportValue: value.value })
|
||||
}
|
||||
@ -34,10 +28,12 @@ class ChartViewer extends Component {
|
||||
|
||||
setFocusChart = () => {
|
||||
const focusChart = this.focusChart.chart
|
||||
if (focusChart) {
|
||||
this.setState({
|
||||
chart: focusChart
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
renderChart = () => {
|
||||
const { chart } = this.state
|
||||
@ -54,14 +50,11 @@ class ChartViewer extends Component {
|
||||
}
|
||||
|
||||
render = () => {
|
||||
const chart = this.state.chart || {}
|
||||
return (
|
||||
<div className='ChartViewer'>
|
||||
<h3 className='chartLabel'>{ chart.label }</h3>
|
||||
{this.renderChart()}
|
||||
<br />
|
||||
{ this.state.chart ? <Button className='saveChartAsImageButton' fluid primary onClick={this.saveChart}>Save As Image</Button> : '' }
|
||||
{ this.state.chart ? <Button className='closeChartButton' fluid onClick={this.closeChart}>Close Chart</Button> : '' }
|
||||
{ this.state.chart ? <Button fluid onClick={this.saveChart}>Save As Image</Button> : '' }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,19 +1,15 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Input, Dropdown, Grid, Button, Icon, List } from 'semantic-ui-react'
|
||||
import Tables from '../../Models/Tables'
|
||||
import './CreateNodule.css'
|
||||
|
||||
class CreateFilterNoduleForm extends Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
constructor () {
|
||||
super()
|
||||
this.state = {
|
||||
filterType: '',
|
||||
filterParams: {},
|
||||
tables: props.tables
|
||||
filterParams: {}
|
||||
}
|
||||
|
||||
this.tables = new Tables()
|
||||
|
||||
this.keyInput = React.createRef()
|
||||
this.valueInput = React.createRef()
|
||||
document.addEventListener('updateTables', this.updateTableList)
|
||||
@ -22,44 +18,21 @@ class CreateFilterNoduleForm extends Component {
|
||||
addKeyValueInput = () => {
|
||||
let filterParams = this.state.filterParams || {}
|
||||
|
||||
if (this.state.keyValue)
|
||||
filterParams[this.state.keyValue] = this.valueInput.current.inputRef.current.value
|
||||
if (this.keyInput.current.inputRef.current.value)
|
||||
filterParams[this.keyInput.current.inputRef.current.value] = this.valueInput.current.inputRef.current.value
|
||||
|
||||
this.setState({ filterParams: filterParams })
|
||||
}
|
||||
|
||||
componentWillReceiveProps = nextProps => {
|
||||
this.setState({tables: nextProps.tables})
|
||||
}
|
||||
|
||||
handleComparisonChange = (e, value) => {
|
||||
handleChange = (e, value) => {
|
||||
this.setState({ filterType: value.value })
|
||||
}
|
||||
|
||||
handleKeyChange = (e, value) => {
|
||||
this.setState({ keyValue: value.value })
|
||||
}
|
||||
|
||||
getFilterProperties = () => {
|
||||
const { filterType, filterParams } = this.state
|
||||
return { filterType, filterParams }
|
||||
}
|
||||
|
||||
getHeadersDropDownOptions = () => {
|
||||
const { tables } = this.state
|
||||
if (!tables || tables.length === 0) return []
|
||||
|
||||
const headers = tables.map(t => {
|
||||
const table = this.tables.getTableByLabel(t)
|
||||
return table.headers
|
||||
}).flat()
|
||||
|
||||
const dropdownOptions = headers.map(h => {
|
||||
return { key: h, text: h, value: h }
|
||||
})
|
||||
return dropdownOptions
|
||||
}
|
||||
|
||||
renderFilterParams = () => {
|
||||
const { filterParams } = this.state
|
||||
|
||||
@ -88,7 +61,7 @@ class CreateFilterNoduleForm extends Component {
|
||||
{key: 'LESSER', text: 'LESSER THAN', value: 'LESSER'},
|
||||
{key: 'LESSEREQUAL', text: 'LESSER THEN EQUAL TO', value: 'LESSEREQUAL'}
|
||||
]}
|
||||
onChange={this.handleComparisonChange}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
|
||||
<Grid columns={2} stackable>
|
||||
@ -96,18 +69,7 @@ class CreateFilterNoduleForm extends Component {
|
||||
<List celled>
|
||||
{ filterParamElements.filterKeyElements }
|
||||
</List>
|
||||
|
||||
<Dropdown
|
||||
clearable
|
||||
search
|
||||
header='Headers'
|
||||
placeholder='Header Key'
|
||||
fluid
|
||||
selection
|
||||
options={this.getHeadersDropDownOptions()}
|
||||
onChange={this.handleKeyChange}
|
||||
/>
|
||||
|
||||
<Input placeholder='Key' ref={this.keyInput} fluid />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<List celled>
|
||||
|
||||
@ -156,8 +156,9 @@ class CreateJoinNoduleForm extends Component {
|
||||
options={this.getForeignHeadersDropDownOptions()}
|
||||
onChange={this.handleForeignKeyChange}
|
||||
/>
|
||||
<br />
|
||||
|
||||
<Button fluid animated='vertical' onClick={this.addJoinParam}>
|
||||
<Button animated='vertical' onClick={this.addJoinParam}>
|
||||
<Button.Content hidden><Icon name='add' /></Button.Content>
|
||||
<Button.Content visible>Add</Button.Content>
|
||||
</Button>
|
||||
|
||||
@ -15,8 +15,7 @@ class CreateNodule extends Component {
|
||||
|
||||
this.state = {
|
||||
noduleType: '',
|
||||
tablesToImportByLabel: [],
|
||||
selectedTablesLabels: []
|
||||
tablesToImportByLabel: []
|
||||
}
|
||||
|
||||
this.tables = new Tables()
|
||||
@ -33,18 +32,13 @@ class CreateNodule extends Component {
|
||||
|
||||
clearInput = () => {
|
||||
this.setState({ noduleType: '' })
|
||||
this.noduleLabelInput.current.inputRef.current.value = ''
|
||||
this.tableSelect.current.clearTablesSelected()
|
||||
}
|
||||
|
||||
handleNoduleTypeChange = (e, value) => {
|
||||
handleChange = (e, value) => {
|
||||
this.setState({ noduleType: value.value })
|
||||
}
|
||||
|
||||
handleSelectedTablesChange = labels => {
|
||||
this.setState({ selectedTablesLabels: labels })
|
||||
}
|
||||
|
||||
handleSubmit = () => {
|
||||
const { noduleType } = this.state
|
||||
|
||||
@ -85,12 +79,11 @@ class CreateNodule extends Component {
|
||||
}
|
||||
|
||||
renderNoduleForm = () => {
|
||||
const { noduleType, selectedTablesLabels } = this.state
|
||||
console.log(selectedTablesLabels)
|
||||
const { noduleType, tablesToImportByLabel } = this.state
|
||||
|
||||
if (noduleType === 'filter') return <CreateFilterNoduleForm ref={this.filterNoduleForm} tables={selectedTablesLabels} />
|
||||
else if (noduleType === 'join') return <CreateJoinNoduleForm ref={this.joinNoduleForm} tables={selectedTablesLabels} />
|
||||
else if (noduleType === 'transform') return <CreateTransformNoduleForm ref={this.transformNoduleForm} tables={selectedTablesLabels} />
|
||||
if (noduleType === 'filter') return <CreateFilterNoduleForm ref={this.filterNoduleForm} />
|
||||
else if (noduleType === 'join') return <CreateJoinNoduleForm ref={this.joinNoduleForm} tables={tablesToImportByLabel || []}/>
|
||||
else if (noduleType === 'transform') return <CreateTransformNoduleForm ref={this.transformNoduleForm} tables={tablesToImportByLabel || []}/>
|
||||
else return ''
|
||||
}
|
||||
|
||||
@ -106,7 +99,7 @@ class CreateNodule extends Component {
|
||||
fluid
|
||||
/>
|
||||
|
||||
<TableSelect ref={this.tableSelect} onChange={this.handleSelectedTablesChange} />
|
||||
<TableSelect ref={this.tableSelect} />
|
||||
|
||||
<Dropdown
|
||||
value ={this.state.noduleType}
|
||||
@ -118,13 +111,13 @@ class CreateNodule extends Component {
|
||||
]}
|
||||
fluid
|
||||
selection
|
||||
onChange={this.handleNoduleTypeChange}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
|
||||
{ this.renderNoduleForm() }
|
||||
|
||||
<div className='creatTableFormSubmitButtons'>
|
||||
<Button content='Cancel' secondary onClick={this.clearInput} />
|
||||
<Button content='Cancel' secondary />
|
||||
<Button content='Confirm' primary onClick={this.handleSubmit} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,61 +1,34 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Input, Grid, Button, Icon, List, Dropdown } from 'semantic-ui-react'
|
||||
import Tables from '../../Models/Tables'
|
||||
import { Input, Grid, Button, Icon, List } from 'semantic-ui-react'
|
||||
import './CreateNodule.css'
|
||||
|
||||
class CreateTransformNoduleForm extends Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
constructor () {
|
||||
super()
|
||||
this.state = {
|
||||
structure: {},
|
||||
tables: props.tables
|
||||
structure: {}
|
||||
}
|
||||
|
||||
this.tables = new Tables()
|
||||
|
||||
this.initialKeyInput = React.createRef()
|
||||
this.newKeyInput = React.createRef()
|
||||
document.addEventListener('updateTables', this.updateTableList)
|
||||
}
|
||||
|
||||
addStructureInput = () => {
|
||||
let { structure, keyValue } = this.state
|
||||
let structure = this.state.structure || {}
|
||||
|
||||
// const initialKey = this.initialKeyInput.current.inputRef.current.value
|
||||
const initialKey = this.initialKeyInput.current.inputRef.current.value
|
||||
const newKey = this.newKeyInput.current.inputRef.current.value
|
||||
|
||||
if (keyValue && newKey) structure[keyValue] = newKey
|
||||
if (initialKey && newKey) structure[initialKey] = newKey
|
||||
|
||||
this.setState({ structure: structure })
|
||||
}
|
||||
|
||||
componentWillReceiveProps = nextProps => {
|
||||
this.setState({tables: nextProps.tables})
|
||||
}
|
||||
|
||||
getHeadersDropDownOptions = () => {
|
||||
const { tables } = this.state
|
||||
if (!tables || tables.length === 0) return []
|
||||
|
||||
const headers = tables.map(t => {
|
||||
const table = this.tables.getTableByLabel(t)
|
||||
return table.headers
|
||||
}).flat()
|
||||
|
||||
const dropdownOptions = headers.map(h => {
|
||||
return { key: h, text: h, value: h }
|
||||
})
|
||||
return dropdownOptions
|
||||
}
|
||||
|
||||
getStructureProperties = () => {
|
||||
return this.state.structure
|
||||
}
|
||||
|
||||
handleKeyChange = (e, value) => {
|
||||
this.setState({ keyValue: value.value })
|
||||
}
|
||||
|
||||
renderStructure = () => {
|
||||
const { structure } = this.state
|
||||
|
||||
@ -78,20 +51,7 @@ class CreateTransformNoduleForm extends Component {
|
||||
<List celled>
|
||||
{ structureElements.initialKeyElements }
|
||||
</List>
|
||||
|
||||
|
||||
{/* <Input placeholder='Initial Key' ref={this.initialKeyInput} fluid /> */}
|
||||
<Dropdown
|
||||
clearable
|
||||
search
|
||||
header='Headers'
|
||||
placeholder='Header Key'
|
||||
fluid
|
||||
selection
|
||||
options={this.getHeadersDropDownOptions()}
|
||||
onChange={this.handleKeyChange}
|
||||
/>
|
||||
|
||||
<Input placeholder='Initial Key' ref={this.initialKeyInput} fluid />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<List celled>
|
||||
|
||||
@ -23,7 +23,6 @@ class TableSelect extends Component {
|
||||
|
||||
toggleSelect = (event, element) => {
|
||||
this.setState({ selectedTablesLabels: element.value })
|
||||
this.props.onChange(element.value)
|
||||
}
|
||||
|
||||
updateTableList = () => {
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Table, Button } from 'semantic-ui-react'
|
||||
import {json2excel} from 'js2excel'
|
||||
import { Table } from 'semantic-ui-react'
|
||||
import './DataTable.css'
|
||||
|
||||
import Tables from '../../Models/Tables'
|
||||
@ -24,8 +23,7 @@ class DataTable extends Component {
|
||||
if (focusTable) {
|
||||
this.setState({
|
||||
headers: focusTable.headers,
|
||||
tableData: focusTable.rows,
|
||||
label: focusTable.label
|
||||
tableData: focusTable.rows
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -49,25 +47,9 @@ class DataTable extends Component {
|
||||
return tableRowElements
|
||||
}
|
||||
|
||||
saveTable = () => {
|
||||
const { tableData, label } = this.state
|
||||
try {
|
||||
json2excel({
|
||||
data: tableData,
|
||||
name: label
|
||||
})
|
||||
// download(tableFile, this.focusTable.label, 'application/vnd.ms-excel')
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
window.alert('Issue downloading Table.')
|
||||
}
|
||||
}
|
||||
|
||||
render = () => {
|
||||
const { tableData, label } = this.state
|
||||
return (
|
||||
<div className='DataTable'>
|
||||
{ tableData.length ? <Button className='saveTableAsExcel' fluid onClick={this.saveTable}>Download { label } Table</Button> : '' }
|
||||
<Table celled>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
|
||||
@ -7,9 +7,7 @@
|
||||
|
||||
.documentationLink{
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
padding: 10px 16px;
|
||||
width: 140px;
|
||||
@ -20,11 +18,6 @@
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
||||
.documentationLink img {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.Nav{
|
||||
height: 40px;
|
||||
background-color: #2185d0;
|
||||
@ -62,6 +55,7 @@
|
||||
background-color: rgb(255, 171, 75);
|
||||
}
|
||||
|
||||
|
||||
.sponsorLink img {
|
||||
width: 36px;
|
||||
}
|
||||
@ -1,19 +1,18 @@
|
||||
import React, { Component } from 'react'
|
||||
import './Nav.css'
|
||||
import sponsorIcon from '../../img/sponsor.svg'
|
||||
import guideIcon from '../../img/faq.svg'
|
||||
import octocat from '../../img/octocat.svg'
|
||||
import adaLovelaceLogo from '../../img/adaLovelace.jpg'
|
||||
|
||||
class Nav extends Component {
|
||||
render = () => {
|
||||
return (
|
||||
<div className='Nav'>
|
||||
<a className='documentationLink' target='_blank' rel='noopener noreferrer' href='https://docs.datalovelace.app'><img src={guideIcon} alt='guide button' />Guide</a>
|
||||
<a className='documentationLink' target='_blank' rel='noopener noreferrer' href='https://docs.lovelace.technology'>Guide</a>
|
||||
<div className='brandHeader'>
|
||||
<img src={adaLovelaceLogo} alt='logo' className='logo' />
|
||||
<span className='appName'>Lovelace</span>
|
||||
</div>
|
||||
<a className='sponsorLink' target='_blank' rel='noopener noreferrer' href='https://github.com/sponsors/joshuashoemaker'><img src={sponsorIcon} alt='sponsor button' /> Sponsor</a>
|
||||
<a className='sponsorLink' target='_blank' rel='noopener noreferrer' href='https://github.com/sponsors/joshuashoemaker'><img src={octocat} alt='sponsor button' /> Sponsor</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user