raathigesh / dazzle Goto Github PK

The demo linked in the readme http://www.raathigesh.com/dazzle is not accesbile for me.

In your example, you use charts.js to create the graphs. Does your library currently support plotly.js (https://plot.ly/javascript/)? I am asking because my current graphs come out blank when shown using your dashboard....

Hi all,

Curious to know who is using Dazzle. If you could share some info, it would be really awesome!

Hey, I love what you've built so far. Great work.

I'd like to suggest integrating with react-grid-layout. They do a great job with responsiveness while preserving the drag-and-drop functionality. Doing so could help make react-dazzle a one-stop-shop for laying widgets out.

If I get a chance I'll fork and see if I can get a working example going.

How would I go about altering the state of a widget from the dashboard component?
I have tried changing the dashboard state to give new props to the widget, and the dashboard state is successfully changed and re-rendered, but the state of the widget never changes.
Perhaps something similar to how props are passed to widgets, a ref could be created for each widget:
widget:{
type: Widget,
title: 'Widget',
props: data,
refs: 'child'
}
Thank you.

Can't find it in demo. Is it possible to resize rows/columns?

Hey, am I able to make widgets that take up multiple rows like this?

I've tried nesting rows within columns but it doesn't seem to work. It may be that I have messed up the object as the nested arrays and curly braces get really complex. If you have an example, could you please post it?

When I try the example in the README, it gives me this error:

/mydazzle/src/index.js
  1:1  error  Parsing error: The keyword 'import' is reserved

✖ 1 problem (1 error, 0 warnings)


ERROR in ./src/components/Dashboard.jsx
Module not found: Error: Cannot resolve 'file' or 'directory' ./widgets/CounterWidget in /mydazzle/src/components
 @ ./src/components/Dashboard.jsx 15:21-55
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 541 kB [rendered]
        [0] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 704 bytes {0} [built]
        [1] ./~/lodash/lodash.js 540 kB {0} [built]
        [2] (webpack)/buildin/module.js 251 bytes {0} [built]
^C

If you mean the user to supply it, can you change it to HelloWorldWidget which you already list in the README.

The drag and drop functionality to reorder the widgets. But it's not smooth enough.

Should be improved to make the experience a lot better.

:)

Following are the ideas I have for the next major version of dazzle.

• Rewrite using typescript
• Use Jest for unit testing
• Move away from grid based layout and use react grid layout (#12)
• Use styled components
• Make dazzle more modular and have plugins.

Plugins

Modularize certain UI components as plugins. The plugins I could think of right now are

• Add widget dialog
• Widget full-screen mode
• Widget configuration dialog

Do you have any ideas or improvements? Let discuss!

Currently Getting the following error in my bundle.js

The package runs perfectly in development mode but as soon as I build my bundle I get the following error: "Super expression must either be null or a function, not defined"

Tracking the error takes to thi section in the lib.js

if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t)

*Note: Using React 16.3.2, webpack 4.8.4 and react-dazzle 1.4.0

Dazzle wraps its Dashboard Component with react-dnd's DragDropContext(HMLT5Backend)

I wish to use Dazzle in my application but also use react-dnd in another part of my component hierarchy which is not under the Dashboard component of Dazzle. So I would need to wrap my top most component in my React application with DragDropContext(HMLT5Backend). But whatever I do I will get the "Error: Cannot have two HTML5 backends at the same time" from react-dnd.

I think I'll not be able to do this without modifying Dazzle to not instantiate the DragDropContext in the Dashboard component. Am I right or is there a workaround that would not imply to modify Dazzle?

Hi I tried using your example you have in the readme for "usage" after installing to my project with npm. The problem is that the dashboard will not render.

I brought in some of you sample widgets to see if that was the issue but I still do not get anything to render using the sample you provided.

// Dashboard
const Dashboard = ('react-dazzle');

// Your widget
import BarChart from './widgets/BarChart';
import LineChart from './widgets/LineChart';
import DoughnutChart from './widgets/DoughnutChart';

// Default styles.
import 'react-dazzle/lib/style/style.css';

setting state...

                            ```
widgets: {
                                        EngineTelemetricsWidget: {
                                  type: BarChart,
                                  title: 'Engine',
                                },
                                PerformanceWidget: {
                                  type: DoughnutChart,
                                  title: 'Reactor Temp',
                                },
                                ShipVitalTelemetricsWidget: {
                                  type: LineChart,
                                  title: 'Reactor Telemetrics',
                                },
                              },
                              llayout: {
                                rows: [{
                                  columns: [{
                                    className: 'col-md-12 col-sm-12 col-xs-12',
                                    widgets: [{key: 'ShipVitalTelemetricsWidget'}],
                                  }],
                                }, {
                                  columns: [{
                                    className: 'col-md-8 col-sm-8 col-xs-8',
                                    widgets: [{key: 'EngineTelemetricsWidget'}],
                                  }, {
                                    className: 'col-md-4 col-sm-4 col-xs-4',
                                    widgets: [{key: 'PerformanceWidget'}],
                                  }],
                                }],
                              }};

(this is inside my render)


<div id="dashboard">
                    <Dashboard  widgets={this.state.widgets} layout={this.state.layout}  />
                </div>

Just checking if this is the supposed behavior: when the dashboard goes to edit mode, the widgets are re-created.

Is there a way to prevent the Dashboard column components from re-creating their widget components?

Many thanks.

Would there be a way such that when a widget is dropped on another container already container a widget they would swap instead of being in the same container? ex. user drops widget A (container A) on widget b (container b), widget A would then be on container B and widget B would be on container A.

I have recently started to use this package for a project I am working on. When running the code locally, I am getting:

./packages/dashboard/node_modules/react-dazzle/dist/lib.js
(Emitted value instead of an instance of Error) Cannot find SourceMap 'lib.js.map': Error: Can't resolve './lib.js.map' in '/Users/h318669/Desktop/Code/scuf/packages/dashboard/node_modules/react-dazzle/dist'

Steps to reproduce is too NPM install and run the package in a new project created with CRA. Also I do not see this when running the sample app.

Thank you.

Just created an app using create-react-app then tried to add dazzle to my project.
Dev build works fine, but when we are creating the deployment builds running the create-react-app command "npm run build" we get an error when browsing the application. Error message shown in browser console is: "Uncaught TypeError: Super expression must either be null or a function, not undefined".
Is there anyway to fix it?

At the moment its impossible to use this dashboard dynamicly.
Where can exist widgets that are not included in the wiedgetList...
Should have a error prevent check here:
Check here: https://github.com/Raathigesh/dazzle/blob/master/lib/components/Widgets.js

and maybe even replace the widget with a Not Found for the user to delete intead of a dashboard crash.
It is not relieable to get a widget from the current layout and expect it to be in the widgets list.
I cant contribute no problem

My current Idea:
If layout widget does not exist on the widget list:
Present a not found widget that instead of complete crash(here the user can now remove thsi widget from his dashboard),
this not found widget can be either get from prop from the developer or we have a default

Example in the readme gives compile error.

Error in ./src/App.js Syntax error: C:/data/projects/test-admin/src/App.js: 'this' is not allowed before super() 10 | class App extends Component {
11 | constructor() {

12 | this.state = {
| ^
13 | widgets: {
14 | WordCounter: {
15 | type: CounterWidget, @ ./src/index.js 13:11-27

Can we use this repo for the functionality of having a smooth drag drop functionality with grid sizing.

It would be good if there was a styles or background prop which you could pass to the custom frame.

I'd quite like to create a metro themed dashboard with different background colors on the widgets

I'm working on some typings for this as we'll likely be using it for our project.

However, I'm just wondering whether you've started the typings already or whether you're interested in creating Typings for this to support Typescript?

I want to remove the web pack related matter and run as a general react project.what are the changes required if i changed to web pack to without web pack in react.

This project doesn't support React 16+ correct?

Hey,

It could be nice if d&d would support placeholder when dragging a widget around as in react-grid-layout.

Thanks.

I have downloaded the sample project and i run it in the browser but it is not working.

I try the first example by I have this error

TypeError: n[e.key] is undefined

Tkanks

Hi,

Really liking this library over react-grid-layout.

However, not sure if it's been picked up before, but it looks like widgets get duplicated if they are dragged and dropped on widgets of the same type.

Will have a look but if it's a know issue, would love to have a fix.

Thanks!

Update: Odd. It seems that:

• The duplication is not consistently occuring
• The duplication can also occur when not dragged over the same type

example:

widgets: {
                RecordPanel:{
                    type: ZcForm,
                    title: 'ZcForm',
                    props:{}
                },
        }

My component RecordPanel need props initialze state, have many RecordPanel ,How to pass different props to different RecordPanel

Look forward to your favourable reply,

@lalitaphalak When I integrate react-dazzle-starter-kit into my project this error is produced,I downgraded dazzle but it also didn't work .Anyone having clue what is getting wrong here?

c
F:/mern-auth-Sagita/client/node_modules/react-dazzle/dist/lib.js:5035
  5032 |   g = e.addWidgetComponent,
  5033 |   v = e.onAdd,
  5034 |   y = e.onMove,
> 5035 |   b = n.map(function (e, t) {
       | ^  5036 | return r.default.createElement(a.default, {
  5037 |   key: t,
  5038 |   className: e.className,

I'm looking for maintainers to keep an eye on this project and answer questions. I don't use this project at the moment personally and I'm focused on few other projects, so I don't have the required time to answer questions, fix bugs and merge PRs.

If you are interested, please comment below.

Hello,

I noticed that when a component is rendered as a widget in the dashboard text cannot be copied to a clipboard. I was wondering is this a limitation due to drag and drop. Please let me know if there are any workarounds or if I am missing anything!

Thanks in advance!

I use react-dazzle to create Dashboard. But in custom frame, i put an input tag and it not work in IE 11.
I cann't select character in textbox. How can I fix it.

Hi guys,

Is Dazzle already supports React 16? I saw a closed issue about this, but I can't figure out if it is already in React 16.

With React 15.5, importing PropTypes from React is deprecated in favour of importing from the new 'prop-types' package.

Please substitute the following:
import React, { PropTypes } from 'react';
With:
import React from 'react';
import PropTypes from 'prop-types';

You obviously need to install the package prop-types

There was so many hopes for 1.2.6 release that we won't see this warning anymore:

Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs

Unfortunatelly react-dnd and react-dnd-html5-backend are pinned to old versions which wasn't aware about React 15.

Is there a reason why react-dnd and react-dnd-html5-backend are pinned to specific old version? Is it possible to use latest versions instead?

The issue happened when drag a widget from same column index but different row.
It is also existing in demo, http://raathigesh.com/dazzle/
The reproduce steps:

1. drag 'reactor temp' to top 1st row 1st column
2. drag the 'reactor temp' to 2nd row 1st column

we can add
monitor.getItem().rowIndex===rowIndex
in WidgetFrame line 63 to fix this temporarily.
But it only can support change the order in a same column, do you want to support move a widget from different column or row and change the order at the same time.

I think it would be nice to maintain, as part of this repo, a list of example widgets submitted by the community. This would allow to showcase what can be achieved with Dazzle and would make a great foundation for people building their own dashboards and widgets.

This could be achieved using the repo Wiki, in a form similar to what's done by Smashing: https://github.com/Smashing/smashing/wiki/Additional-Widgets

One limitation is that given Dazzle's flexibility in terms of dashboard styling, most widgets will probably need to be tweaked slightly to make them fit in one's dashboard.

User submissions

For user submissions, I would suggest the following ground rules:

• MUST include a comprehensive README.md
• MUST include a screenshot of the widget
• SHOULD be as self-contained as possible (~1 .js file)

For example: https://gist.github.com/vlaurin/34685a2fc8159ba95f2831aef637c6ef

I am trying to use Dazzle with React Material Design Light but I am having issues with the grid structure. Dazzle generates the following html:

There is an extra div between mdl-grid and mdl-cell. React MDL uses flexbox. The extra div between the grid and the cells causes the cells to collapse.

I've looked at the code. The reason the extra <div /> is created in Columns.js. I assume it is there because React render requires a single element at the root. It seems to me that the rowClass should be on that div rather than in Row.js.

IMO, Row.js is not really performing any useful task. The rowClass should be in Columns.js which makes Row.js redundant. I could be missing something though?

I would propose that rowClass is moved to Columns.js and Row.js is removed. Columns.js could even be renamed to Row.js if that makes more sense.

Thoughts? Happy to submit a PR if you want one.

Dupe of #49 & #51, but with reproduction: https://github.com/samsch/test-dazzle

I forked and modified the build to fix this. https://github.com/samsch/dazzle/tree/1.4.0-cjs

There's no real need to build with Webpack for CommonJS modules, none of the features in the config are being used, so this does the build with just Babel and outputs the compiled modules to dist/.

You can directly install from the .tzg file attached to the release to get this fix now.

npm i https://github.com/samsch/dazzle/releases/download/1.4.0-cjs/react-dazzle-1.4.0.tgz

I changed the package main to point to dist/index.js, but the package also includes the umd build as dist/dazzle.min.js.

This error only occurs when bundle is produced with production mode of webpack. Keeping everything the same and rolling back to 1.2.7 fixes the issue.