Рубрики
Без рубрики

От панды данных DataFrame на веб-сайт с AG-решеткой в 10 линиях Python

Введение Pandas – это «быстрый, мощный, гибкий и простой в использовании анализа данных с открытым исходным кодом … Теги с Python, Pandas, WebDev, Tappy.

Введение

Пандас «быстрая, мощная, гибкая и простая в использовании анализа данных и манипуляции данных с открытым исходным кодом, построена на верхней части языка программирования Python». Он используется миллионами программиста.

AG-GRID Сама счета как «лучшая сетка JavaScript в мире» и его обширный список функций, а также его скорость делают спорить против этого утверждения.

Топный это пакет Python, который позволяет строить веб-приложения без какого-либо программирования JavaScript (я создательстоксток). Топный приходит с Pandas расширение Это позволяет очень легко вставить данные из DataFrame в AG-Grid и в веб-приложение.

Основной пример

Следующая программа считывает файл CSV в DataFrame и создает веб-приложение, которое обслуживает веб-страницу с AG-Grid. данные Описывает процент степеней бакалавра, присвоенный женщинам майор в 1970-2012 годы.

import justpy as jp
import pandas as pd

# Load data showing percent of women in different majors per year
wm = pd.read_csv('https://elimintz.github.io/women_majors.csv').round(2)

def grid_test():
    wp = jp.WebPage()
    wm.jp.ag_grid(a=wp)  # a=wp adds the grid to WebPage wp
    return wp

jp.justpy(grid_test)

Вот и все. Это вся программа.

Чтобы запустить эту программу, вам нужно иметь Python версии 3.6 или выше, и вам нужно установить пакеты Pandas и Tappy. Затем вы создадим файл с вашим любимым текстовым редактором и скопируйте и вставьте программу выше. Если вы позвонили в файл grid.py Вы бы набрали Python3 Grid.py В командной строке или вы можете использовать IDE. По умолчанию вы получите доступ к веб-странице, указав браузер на http://127.0.0.1:8000. (Легко изменить IP-адрес и порт, что приложение использует, если вы хотите)

Для более подробного объяснения о том, как начать использовать ProstPY, пожалуйста, смотрите Начало работы из учебника.

После того, как страница загружает, переместите мышь на любой из заголовков столбцов, чтобы попробовать интерактивные функции сетки.

Несколько решеток на странице

Вы можете поставить столько AG-GRID на странице, как вам нравится. Ниже мы создаем еще один Dataframe только с помощью специальностей, в которых женщины начались менее 20% и поместите оригинальный DataFrame и новый DataFrame на странице. Прокрутите вниз по вкладке браузера, чтобы увидеть вторую сетку.

import justpy as jp
import pandas as pd

wm = pd.read_csv('https://elimintz.github.io/women_majors.csv').round(2)
wm_under_20 = wm[wm.loc[0, wm.loc[0] < 20].index]
wm_under_20.insert(0, 'Year', wm['Year'])

def grid_test():
    wp = jp.WebPage()
    wm.jp.ag_grid(a=wp)
    wm_under_20.jp.ag_grid(a=wp)
    return wp

jp.justpy(grid_test)

Настройка решеток

Вы также можете указать дополнительные параметры для AG-Grid после его создания. Учебный класс Pyston, что модели AG-Grid имеет Варианты атрибут, который идентичен в структуре к JavaScript One. Когда он модифицируется, сетка на странице будет отражать эти изменения.

В программе ниже мы изменяем варианты так, чтобы: 1) Сетка страгана 2) Размер страницы сетки автоматически определяется на основе размера вкладки браузера 3) «Год» колонна отформатирована с классами CSS (Tappy поставляется с Cipwind CSS классы из коробки) 4) Каждая ячейка данных условно отформатирована на основе его стоимости

import justpy as jp
import pandas as pd

wm_df = pd.read_csv('https://elimintz.github.io/women_majors.csv').round(2)

def grid_test():
    wp = jp.WebPage()
    grid = wm_df.jp.ag_grid(a=wp)
    grid.options.pagination = True
    grid.options.paginationAutoPageSize = True
    grid.options.columnDefs[0].cellClass = ['text-white', 'bg-blue-500', 'hover:bg-blue-200']
    for col_def in grid.options.columnDefs[1:]:
        col_def.cellClassRules = {
            'font-bold': 'x < 20',
            'bg-red-300': 'x < 20',
            'bg-yellow-300': 'x >= 20 && x < 50',
            'bg-green-300': 'x >= 50'
        }
    return wp

jp.justpy(grid_test)

Маршруты и несколько страниц

С топпой простым служить Girds с разными данными на основе URL.

В примере ниже URL http://127.0.0.1/wm будет служить полной решетке, в то время как URL http://127.0.0.1/wm_20 Послушат сетку только с помощью майоров, в которых женщины начались до 20%.

import justpy as jp
import pandas as pd

wm = pd.read_csv('https://elimintz.github.io/women_majors.csv').round(2)
wm_under_20 = wm[wm.loc[0, wm.loc[0] < 20].index]
wm_under_20.insert(0, 'Year', wm['Year'])

# Tailwind classes to format header div
title_classes = 'text-2xl text-white bg-blue-500 text-center mb-2 p-2'

# Change grid default style to change height
grid_style = 'height: 85vh; width: 99%; margin: 0.25rem; padding: 0.25rem;'

@jp.SetRoute('/wm')
def serve_wm():
    wp = jp.WebPage()
    jp.Div(text='All Majors', classes=title_classes, a=wp)
    wm.jp.ag_grid(a=wp, style=grid_style)
    return wp

@jp.SetRoute('/wm_20')
def serve_wm():
    wp = jp.WebPage()
    jp.Div(text='Only Majors with Women Starting Under 20%', classes=title_classes, a=wp)
    wm_under_20.jp.ag_grid(a=wp, style=grid_style)
    return wp

jp.justpy()

AG-GRID Enterprise

По умолчанию Tappy использует версию сообщества AG-Grid, которая является бесплатным для использования продукта, распределенного под лицензией MIT. Если вы хотите попробовать версию предприятия, создайте файл под названием Топп .env В каталоге, где ваш программный файл и включите в него следующее:

AGGRID = False
AGGRID_ENTERPRISE = True

Выучить больше

В будущих статьях я покажу, как взаимодействовать с Gird событиями, а также как создавать интерактивные диаграммы, связанные с передачи данных.

Если вы хотите узнать больше, как вы можете быстро переместить данные Pandas на веб-страницу без какого-либо программирования JavaScript, пожалуйста, перейдите на Топные документы и учебники И не стесняйтесь спрашивать меня любые вопросы либо в комментариях ниже или на Github Отказ

Оригинал: “https://dev.to/elimintz/from-a-pandas-dataframe-to-a-web-site-with-an-ag-grid-in-10-lines-of-python-2a9b”