Skip to content

Commit 0aaa7df

Browse files
pip-install-pythonpip-install-python
committed
filled out and cleaned upREADME.md files 🧹
1 parent 71a1544 commit 0aaa7df

File tree

3 files changed

+142
-11
lines changed

3 files changed

+142
-11
lines changed

‎docs/dash_dynamic_grid_layout/dash_dynamic_grid_layout.md

Lines changed: 85 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,94 @@ icon: uim:grid
88

99
.. toc::
1010

11+
[Visit GitHub Repo](https://github.com/pip-install-python/dash-dynamic-grid-layout)
12+
13+
Dash Dynamic Grid Layout is a Dash component library that provides a flexible grid layout system for arranging and moving components within a Dash application.
14+
15+
![Dynamic Grid Example](https://i.imgur.com/BADjL7L.gif)
16+
17+
## Features
18+
19+
- Drag-and-drop functionality for rearranging components
20+
- Resizable grid items
21+
- Customizable layout with responsive breakpoints
22+
- Option to add or remove items dynamically
23+
- Customizable drag handles for each item
24+
1125
```bash
1226
pip install dash-dynamic-grid-layout
1327
```
1428

29+
### Usage
30+
Here's a basic example of how to use the DashGridLayout component:
31+
32+
```python
33+
import dash_dynamic_grid_layout as ddgl
34+
from dash import Dash, html, dcc
35+
import plotly.express as px
36+
37+
app = Dash(__name__)
38+
39+
df = px.data.iris()
40+
41+
app.layout = html.Div([
42+
ddgl.DashGridLayout(
43+
id='grid-layout',
44+
children=[
45+
ddgl.DraggableWrapper(
46+
children=[
47+
html.Div('Drag me!', style={'height': '100%', 'display': 'flex', 'alignItems': 'center', 'justifyContent': 'center', 'border': '1px solid #ddd', 'borderRadius': '5px'})
48+
],
49+
handleText='Move'
50+
),
51+
ddgl.DraggableWrapper(
52+
children=[
53+
dcc.Graph(
54+
figure=px.scatter(df, x="sepal_width", y="sepal_length", color="species"),
55+
style={'height': '100%'}
56+
)
57+
],
58+
handleText='Move Graph'
59+
)
60+
],
61+
rowHeight=150,
62+
cols={'lg': 12, 'md': 10, 'sm': 6, 'xs': 4, 'xxs': 2},
63+
style={'height': '600px'},
64+
)
65+
])
66+
67+
if __name__ == '__main__':
68+
app.run_server(debug=True)
69+
```
70+
71+
1572
### Example
1673

17-
.. exec::docs.dash_dynamic_grid_layout.intro
74+
.. exec::docs.dash_dynamic_grid_layout.intro
75+
76+
## Prop Reference
77+
### DashGridLayout
78+
79+
| Property | Type | Default | Description |
80+
|------------------|--------|---------|---------------------------------------------------------------|
81+
| id | string | - | The ID used to identify this component in Dash callbacks |
82+
| children | list | - | A list of dash components to be rendered in the grid |
83+
| currentLayout | list | [] | The current layout of the grid items |
84+
| rowHeight | number | 100 | The height of a single row in pixels |
85+
| cols | dict | { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 } | An object containing breakpoints and column numbers |
86+
| compactType | string | 'vertical' | Compaction type. Can be 'vertical', 'horizontal', or null |
87+
| showRemoveButton | bool | True | Whether to show remove buttons for grid items |
88+
| showResizeHandles| bool | True | Whether to show resize handles for grid items |
89+
90+
### DraggableWrapper
91+
92+
| Property | Type | Default | Description |
93+
|------------------|--------|---------------|--------------------------------------------------|
94+
| children | node | - | The content to be wrapped and made draggable |
95+
| handleBackground | string | "rgb(85,85,85)"| Background color of the drag handle |
96+
| handleColor | string | "white" | Text color of the drag handle |
97+
| handleText | string | "Drag here" | Text to display in the drag handle |
98+
### Contributing
99+
Contributions are welcome! Please feel free to submit a Pull Request.
100+
### License
101+
This project is licensed under the MIT License.

‎docs/dash_nivo/dash_nivo.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,58 @@ package: dash_nivo
66
icon: la:chart-line
77
---
88

9+
This package provides Dash components for Nivo charts. Currently, it includes two components: ResponsiveCircle and AreaBump.
10+
11+
[Visit GitHub Repo](https://github.com/pip-install-python/dash_nivo)
12+
13+
914
### Installation
1015

1116
```bash
1217
pip install dash-nivo
1318
```
19+
1420
### Area Bump Example
1521
.. exec::docs.dash_nivo.areabump
1622

23+
Properties
24+
25+
| Property | Type | Default | Description |
26+
|----------------|------------------|----------------------------------------------|--------------------------------------------------|
27+
| `id` | string | - | The ID of this component, used to identify dash components |
28+
| `data` | array | - | The data to display |
29+
| `margin` | object | { top: 40, right: 100, bottom: 40, left: 100 } | Chart margin |
30+
| `spacing` | number | 8 | Spacing between each area |
31+
| `colors` | object or func | { scheme: 'nivo' } | Colors used for the areas |
32+
| `blendMode` | string | 'multiply' | Blend mode for areas |
33+
| `defs` | array | See default props | Defines patterns and gradients |
34+
| `fill` | array | See default props | Defines how to fill areas |
35+
| `startLabel` | string or func | 'id' | Defines how to get the label of an area at the start |
36+
| `endLabel` | string or func | 'id' | Defines how to get the label of an area at the end |
37+
| `axisTop` | object | See default props | Top axis configuration |
38+
| `axisBottom` | object | See default props | Bottom axis configuration |
39+
| `clickedPoint` | object | null | Contains data about the clicked point |
40+
1741
### Responsive Circle Example
1842
.. exec::docs.dash_nivo.responsivecircle
43+
44+
Properties
45+
46+
| Property | Type | Default | Description |
47+
|------------------|---------|----------------------------------------------|--------------------------------------------------|
48+
| `id` | string | - | The ID of this component, used to identify dash components |
49+
| `data` | object | - | The hierarchical data to display |
50+
| `margin` | object | { top: 20, right: 20, bottom: 20, left: 20 } | Chart margin |
51+
| `colors` | object | { scheme: 'nivo' } | Colors used for the circles |
52+
| `childColor` | object | See default props | How to compute child circle color |
53+
| `padding` | number | 4 | Padding between each circle |
54+
| `enableLabels` | bool | true | Enable/disable labels |
55+
| `labelsFilter` | func | label => label.node.height === 0 | Define which labels should be displayed |
56+
| `labelsSkipRadius` | number | 16 | Skip label rendering if node radius is lower than given value |
57+
| `labelTextColor` | object | See default props | How to compute label text color |
58+
| `borderWidth` | number | 1 | Width of circle border |
59+
| `borderColor` | object | See default props | How to compute circle border color |
60+
| `defs` | array | See default props | Defines patterns and gradients |
61+
| `fill` | array | See default props | Defines how to fill circles |
62+
| `motionConfig` | string | 'slow' | Motion config for transitions |
63+
| `zoomedId` | string | null | ID of the zoomed circle |

‎pages/home.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,24 @@
33

44
![logo](https://pipinstallpython.pythonanywhere.com/static/img/brand/side_bar_logo/ForGroundLogo.png)
55

6-
Pip-Install-Python is the name associated with my Github and Youtube channel. Self taught developer, I found python programming as an outlet for my creativity and path to scale my future with. I have been working with Dash in both enterprise and open source focused projects for a while now and have built a few PyPi component's that I have compiled together in this documentation to share with those interested as useful tools for building out applications.
6+
Pip-Install-Python is the name associated with my Github and Youtube channel. Self taught developer, I found python programming as an outlet for my creativity and path to scale my future with. I have been working with Dash in both enterprise and open source focused projects for a while now and have built many PyPi component's that I have compiled together in this documentation to share with those interested.
77

8-
Link to my GutHub: [Pip-Install-Python](https://github.com/pip-install-python)
8+
Link to my GutHub: [Pip-Install-Python](https://github.com/pip-install-python)
9+
- ![GitHub](https://img.shields.io/github/followers/pip-install-python?style=social)
910

10-
Link to my YouTube channel: [Pip Install Python](https://www.youtube.com/channel/UC-pBvv8mzLpj0k-RIbc2Nog?sub_confirmation=1)
11-
12-
Link to my app: [PiratesBargain](http://988.wtf)
11+
Link to my YouTube channel: [Pip Install Python](https://www.youtube.com/channel/UC-pBvv8mzLpj0k-RIbc2Nog?sub_confirmation=1)
12+
- ![YouTube](https://img.shields.io/youtube/channel/subscribers/UC-pBvv8mzLpj0k-RIbc2Nog?style=social)
1313

1414
These are the components that I have built and am currently maintaining:
1515

16-
* [![Downloads](https://static.pepy.tech/badge/full-calendar-component)](https://pepy.tech/project/full-calendar-component) ` Full-Calendar-Component` - A Full Calendar Component for Dash
16+
* [![Downloads](https://static.pepy.tech/badge/dash-swiper)](https://pepy.tech/project/dash-swiper) `Dash Swiper` - A Swiper Component for Dash
1717
* [![Downloads](https://static.pepy.tech/badge/dash-summernote)](https://pepy.tech/project/dash-summernote) `Dash Summernote` - A rich text WYSIWYG Editor for Dash
18-
* [![Downloads](https://static.pepy.tech/badge/dash-discord)](https://pepy.tech/project/dash-discord) `Dash Discord` - Discord integration for the Dash framework
18+
* [![Downloads](https://static.pepy.tech/badge/dash-insta-stories)](https://pepy.tech/project/dash-insta-stories) `Dash Insta Stories` - A Instagram Stories Component for Dash
19+
* [![Downloads](https://static.pepy.tech/badge/dash-image-gallery)](https://pepy.tech/project/dash-image-gallery) `Dash Image Gallery` - A Image Gallery Component for Dash
20+
* [![Downloads](https://static.pepy.tech/badge/full-calendar-component)](https://pepy.tech/project/full-calendar-component) ` Full-Calendar-Component` - A Full Calendar Component for Dash
1921
* [![Downloads](https://static.pepy.tech/badge/dash-emoji-mart)](https://pepy.tech/project/dash-emoji-mart) ` Dash Emoji Mart` - A Slack-like Emoji Picker for Dash
22+
* [![Downloads](https://static.pepy.tech/badge/dash-dynamic-grid-layout)](https://pepy.tech/project/dash-dynamic-grid-layout) `Dash Dynamic Grid Layout` - A Dynamic Grid Layout Component for Dash
23+
* [![Downloads](https://static.pepy.tech/badge/dash-discord)](https://pepy.tech/project/dash-discord) `Dash Discord` - Discord integration for the Dash framework
24+
* [![Downloads](https://static.pepy.tech/badge/dash-nivo)](https://pepy.tech/project/dash-nivo) `Dash Nivo` - A Nivo Component for Dash
2025
* [![Downloads](https://static.pepy.tech/badge/dash-charty)](https://pepy.tech/project/dash-charty) `Dash Charty` - A Charting Library for Dash
21-
* [![Downloads](https://static.pepy.tech/badge/dash-image-gallery)](https://pepy.tech/project/dash-image-gallery) `Dash Image Gallery` - A Image Gallery Component for Dash
22-
* [![Downloads](https://static.pepy.tech/badge/dash-swiper)](https://pepy.tech/project/dash-swiper) `Dash Swiper` - A Swiper Component for Dash
23-
* [![Downloads](https://static.pepy.tech/badge/dash-insta-stories)](https://pepy.tech/project/dash-insta-stories) `Dash Insta Stories` - A Instagram Stories Component for Dash
2426
* [![Downloads](https://static.pepy.tech/badge/dash-credit-cards)](https://pepy.tech/project/dash-credit-cards) `Dash Credit Cards` - A Credit Card Component for Dash

0 commit comments

Comments
 (0)