Dash plotly go.bar doesn't properly updates its bar heights based on date span

Dash Python
1

Hi, dash community.
I’m a poor data analyst working at e-commerce scene in South Korea sweat_smile: sweat_smile:

I recently have made dashboard visualizing every click-UV on every area on our mobile app.
According to the images shown below, you can see the two horizontal bar graphs showing every area on the page from top to the bottom.

The issues here is that when I set the date span just for one day, (ex. 2020-03-25, 2020-03-25)
the bar shows its height properly based on each value. (left bar graph)

image
image726×1894 148 KB
image
image676×1896 154 KB

But when I set the date span more than a day, then the bar is just not showing proper height based on its value. As you can see the right bar graph, the last 60 red bar’s heights are abnormaly high. They are supposed to show similar bar heights to that of just one day, because every value is averaged based on their date span. (daily mean)

I want to know what would be the solution for this.

The code related with this is shown below.

I’ve been always grateful for the help this community provides.

Thank you for reading this.

# Second long flipped bar plot
def figures_bar_free(str_dt, end_dt, table):
    if str_dt < '2020-02-28':
        table = pd.read_json(table)
        table = table.loc[table.date.between(str_dt, end_dt)]
        # Averaging
        table = table.groupby(['order', 'area_id', 'free_name'])[['custom_free_text_uv', 'custom_free_text_pv',
                                                                  'ord_uv', 'ord_cnt', 'ord_item',
                                                                  'ctr', 'cr']].mean().reset_index().drop('order', axis=1)

        table = free_order_fix. \
                    merge(table,
                          on='free_name',
                          how='left'). \
                    loc[:, ['order', 'date', 'area_id', 'free_name', 'custom_free_text_uv', 'custom_free_text_pv',
                            'ord_uv', 'ord_cnt', 'ord_item', 'ctr', 'cr']]. \
            rename(columns=dict(**{i: j for i, j in zip(['order', 'area_id', 'free_name', 'custom_free_text_uv',
                                                         'custom_free_text_pv', 'ord_uv', 'ord_cnt', 'ord_item',
                                                         'ctr', 'cr'],
                                                        ['순서', 'area_id', '구좌명', '구좌클릭UV', '구좌클릭PV', '구좌주문UV',
                                                         '구좌주문수', '구좌주문아이템개수', 'CTR', 'CR'])}))
    else:
        table = pd.read_json(table)
        table = table.loc[table.date.between(str_dt, end_dt)]
        # Averaging
        table = table.groupby(['order', 'area_id', 'free_name'])[['custom_free_text_uv', 'custom_free_text_pv',
                                                                  'ord_uv', 'ord_cnt', 'ord_item',
                                                                  'ctr', 'cr']].mean().reset_index()
        table = free_order_fix_2\
            .merge(table,
                   on='free_name',
                   how='left')\
            .loc[:, ['free_order', 'area_id', 'free_name', 'custom_free_text_uv',
                     'custom_free_text_pv', 'ord_uv', 'ord_cnt', 'ord_item', 'ctr', 'cr']]\
            .sort_values('free_order')

        table = table.rename(columns=dict(**{i: j for i, j in zip(['free_order', 'area_id', 'free_name', 'custom_free_text_uv',
                                                         'custom_free_text_pv', 'ord_uv', 'ord_cnt', 'ord_item',
                                                         'ctr', 'cr'],
                                                        ['순서', 'area_id', '구좌명', '구좌클릭UV', '구좌클릭PV', '구좌주문UV',
                                                         '구좌주문수', '구좌주문아이템개수', 'CTR', 'CR'])}))

    return table

@app.callback(
    Output('free-bar-flipped', 'figure'),
    [Input('free-str-dt', 'value'),
     Input('free-end-dt', 'value'),
     Input('free-figure-select', 'value'),
     Input('intermediate-value-df_free_lvl_before_20200228', 'children'),
     Input('intermediate-value-df_free_lvl_after_20200228', 'children')]
)
def update_bar_flipped_free(str_dt, end_dt, column, table1, table2):
    if str_dt < '2020-02-28':
        dff = figures_bar_free(str_dt, end_dt, table1)
    else:
        dff = figures_bar_free(str_dt, end_dt, table2)
    # color setting
    area_unq = dff.area_id.unique()
    hexx = get_N_HexCol(len(area_unq))
    color_df = pd.DataFrame({
        'area_id': area_unq,
        'color': hexx
    })
    dff = dff.merge(color_df, on='area_id').sort_values('순서')
    result = {
        "data": [
            go.Bar(
                x=dff[column], y=dff['구좌명'],
                orientation='h',
                textposition='auto',
                width=0.5,
                marker=dict(color=dff.color),
                hovertext=dff['구좌명'],
                customdata=dff['구좌명'],
                hoverinfo="x+text"
            )
        ],
        "layout": go.Layout(
            autosize=True,
            width=350,
            height=930,
            font={"family": "Raleway", "size": 5},
            margin={
                "r": 5,
                "t": 13,
                "b": 3,
                "l": 50,
            },
            showlegend=False,
            titlefont={
                "family": "Raleway",
                "size": 10,
            },
            xaxis={
                "autorange": True,
                "showline": True,
                "zeroline": False,
                'hoverformat': ",.0f"

            },
            yaxis={
                "autorange": "reversed",
                "showline": True,
                "zeroline": False,
                'ticktext': dff.구좌명,
            },
        )
    }
    return result