fix(chart): set the series id correctly

[kisvegabor]

Description of the feature or fix

fixes #5450

Notes

• Update the Documentation if needed.
• Add Examples if relevant.
• Add Tests if applicable.
• If you added new options to lv_conf_template.h run lv_conf_internal_gen.py and update Kconfig.
• Run scripts/code-format.py (astyle needs to be installed) and follow the Code Conventions
• Mark the Pull request as Draft while you are working on the first version, and mark is as Ready when it's ready for review.
• When changes were requested, re-request review to notify the maintainers.
• Help us to review this Pull Request! Anyone can approve or request changes.

[lhdjply]

test correct, good

[lhdjply]

After the change, it seems that there is no need to determine whether bar or line, if and else content is exactly the same

[lhdjply]

Delete the content in else, the display is still normal

[lhdjply]

I found some issues with the line as well.

fb3958e7ba23638b3a0e09a71d769b26.mp4

test code

static void chart_event_cb(lv_event_t * e)
{
  lv_event_code_t code = lv_event_get_code(e);
  lv_obj_t * obj = lv_event_get_target(e);

  if(code == LV_EVENT_PRESSED || code == LV_EVENT_RELEASED)
  {
    lv_obj_invalidate(obj); /*To make the value boxes visible*/
  }
  else if(code == LV_EVENT_DRAW_TASK_ADDED)
  {
    lv_draw_task_t * draw_task = lv_event_get_param(e);
    lv_draw_dsc_base_t * base_dsc = draw_task->draw_dsc;

    bool add_value = false;
    if(base_dsc->part == LV_PART_INDICATOR && lv_chart_get_pressed_point(obj) == base_dsc->id2)
    {
      if(lv_chart_get_type(obj) == LV_CHART_TYPE_LINE)
      {
        lv_draw_rect_dsc_t outline_dsc;
        lv_draw_rect_dsc_init(&outline_dsc);
        outline_dsc.bg_opa = LV_OPA_TRANSP;
        outline_dsc.outline_color = lv_color_white();
        outline_dsc.outline_width = 2;
        outline_dsc.radius = LV_RADIUS_CIRCLE;
        lv_draw_rect(base_dsc->layer, &outline_dsc, &draw_task->area);
        add_value = true;
      }
    }

    if(add_value)
    {
      const lv_chart_series_t * ser = NULL;
      for(uint8_t i = 0; i < base_dsc->id1 + 1; i++)
      {
        ser = lv_chart_get_series_next(obj, ser);
      }

      char buf[8];
      lv_snprintf(buf, sizeof(buf), "%"LV_PRIu32, ser->y_points[base_dsc->id2]);

      lv_point_t text_size;
      lv_text_get_size(&text_size, buf, LV_FONT_DEFAULT, 0, 0, LV_COORD_MAX, LV_TEXT_FLAG_NONE);

      lv_area_t txt_area;
      txt_area.x1 = draw_task->area.x1 + lv_area_get_width(&draw_task->area) / 2 - text_size.x / 2;
      txt_area.x2 = txt_area.x1 + text_size.x;
      txt_area.y2 = draw_task->area.y1 - LV_DPX(15);
      txt_area.y1 = txt_area.y2 - text_size.y;

      lv_area_t bg_area;
      bg_area.x1 = txt_area.x1 - LV_DPX(8);
      bg_area.x2 = txt_area.x2 + LV_DPX(8);
      bg_area.y1 = txt_area.y1 - LV_DPX(8);
      bg_area.y2 = txt_area.y2 + LV_DPX(8);

      lv_draw_rect_dsc_t rect_dsc;
      lv_draw_rect_dsc_init(&rect_dsc);
      rect_dsc.bg_color = ser->color;
      rect_dsc.radius = LV_DPX(5);
      lv_draw_rect(base_dsc->layer, &rect_dsc, &bg_area);

      lv_draw_label_dsc_t label_dsc;
      lv_draw_label_dsc_init(&label_dsc);
      label_dsc.color = lv_color_white();
      label_dsc.font = LV_FONT_DEFAULT;
      label_dsc.text = buf;
      label_dsc.text_local = true;
      lv_draw_label(base_dsc->layer, &label_dsc, &txt_area);
    }
  }
}

void test_Chart(void)
{
  static const int32_t col_dsc[] = {40, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
  static const int32_t row_dsc[] = {LV_GRID_CONTENT, LV_GRID_FR(1), 40, LV_GRID_TEMPLATE_LAST};

  lv_obj_t * chart_cont = lv_obj_create(lv_screen_active());
  lv_obj_set_size(chart_cont, lv_pct(100), lv_pct(86));
  lv_obj_set_flex_grow(chart_cont, 1);
  lv_obj_set_grid_dsc_array(chart_cont, col_dsc, row_dsc);
  lv_obj_set_style_pad_column(chart_cont, 0, LV_PART_MAIN);
  lv_obj_set_style_pad_row(chart_cont, 0, LV_PART_MAIN);

  lv_obj_t * chart_label = lv_label_create(chart_cont);
  lv_label_set_text(chart_label, "chart test");
  lv_obj_set_grid_cell(chart_label,
                       LV_GRID_ALIGN_START, 0, 1,
                       LV_GRID_ALIGN_STRETCH, 0, 1);

  lv_obj_t * chart_scale_ver = lv_scale_create(chart_cont);
  lv_scale_set_mode(chart_scale_ver, LV_SCALE_MODE_VERTICAL_LEFT);
  lv_obj_set_grid_cell(chart_scale_ver,
                       LV_GRID_ALIGN_END, 0, 1,
                       LV_GRID_ALIGN_STRETCH, 1, 1);
  lv_scale_set_total_tick_count(chart_scale_ver, 11);
  lv_scale_set_major_tick_every(chart_scale_ver, 2);
  lv_scale_set_range(chart_scale_ver, 0, 300);

  lv_obj_t * chart_wrapper = lv_obj_create(chart_cont);
  lv_obj_remove_style(chart_wrapper, NULL, LV_PART_MAIN);
  lv_obj_set_style_pad_left(chart_wrapper, 10, LV_PART_MAIN);
  lv_obj_set_style_pad_right(chart_wrapper, 10, LV_PART_MAIN);
  lv_obj_set_grid_dsc_array(chart_wrapper, NULL, NULL);
  lv_obj_set_grid_cell(chart_wrapper,
                       LV_GRID_ALIGN_STRETCH, 1, 1,
                       LV_GRID_ALIGN_STRETCH, 1, 2);
  lv_obj_set_scroll_dir(chart_wrapper, LV_DIR_HOR);

  lv_obj_t * chart = lv_chart_create(chart_wrapper);
  lv_obj_set_width(chart, lv_pct(200));
  lv_obj_add_flag(chart,
                  LV_OBJ_FLAG_SCROLL_ON_FOCUS | LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
  lv_chart_set_type(chart, LV_CHART_TYPE_LINE);
  lv_chart_set_div_line_count(chart, 0, 12);
  lv_chart_set_point_count(chart, 12);
  lv_obj_set_grid_cell(chart,
                       LV_GRID_ALIGN_START, 0, 1,
                       LV_GRID_ALIGN_STRETCH, 0, 1);
  lv_obj_set_style_border_width(chart, 0, LV_PART_MAIN);
  lv_obj_set_style_radius(chart, 0, LV_PART_MAIN);
  lv_obj_add_event_cb(chart, chart_event_cb, LV_EVENT_ALL, NULL);

  lv_obj_t * chart_scale_hor = lv_scale_create(chart_wrapper);
  lv_obj_set_size(chart_scale_hor, lv_pct(200), 40);
  lv_scale_set_mode(chart_scale_hor, LV_SCALE_MODE_HORIZONTAL_BOTTOM);
  lv_obj_set_grid_cell(chart_scale_hor,
                       LV_GRID_ALIGN_START, 0, 1,
                       LV_GRID_ALIGN_START, 1, 1);
  lv_scale_set_total_tick_count(chart_scale_hor, 12);
  lv_scale_set_major_tick_every(chart_scale_hor, 1);
  lv_obj_set_style_pad_hor(chart_scale_hor,
                           lv_chart_get_first_point_center_offset(chart),
                           LV_PART_MAIN);

  lv_obj_set_style_pad_ver(chart_scale_ver,
                           lv_obj_get_style_pad_top(chart, 0),
                           LV_PART_MAIN);

  lv_chart_series_t * chart_ser1 = lv_chart_add_series(chart,
                                                       lv_palette_main(LV_PALETTE_YELLOW),
                                                       LV_CHART_AXIS_PRIMARY_Y);
  lv_chart_series_t * chart_ser2 = lv_chart_add_series(chart,
                                                       lv_palette_main(LV_PALETTE_GREEN),
                                                       LV_CHART_AXIS_PRIMARY_Y);
  lv_chart_series_t * chart_ser3 = lv_chart_add_series(chart,
                                                       lv_palette_main(LV_PALETTE_RED),
                                                       LV_CHART_AXIS_PRIMARY_Y);
  lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 300);
  for(uint32_t i = 0; i < 12; i++)
  {
    lv_chart_set_next_value(chart,
                            chart_ser1,
                            lv_rand(210, 230));

    lv_chart_set_next_value(chart,
                            chart_ser2,
                            lv_rand(110, 130));

    lv_chart_set_next_value(chart,
                            chart_ser3,
                            lv_rand(10, 30));
  }
}

[kisvegabor]

Both are fixed and I've added a test too.

[lhdjply]

It is looks good to me.
However, it is important to note that the generated text should preferably be one layer above the bar chart to avoid being obscured and invisible.

[kisvegabor]

I've also noticed that, but left it as it is intentionally as this is the pure result without any magic. For a test I think the simpler is better.

The user could save the values and draw everything at once in the last call.

[lhdjply]

I've also noticed that, but left it as it is intentionally as this is the pure result without any magic. For a test I think the simpler is better.

The user could save the values and draw everything at once in the last call.

Okay, I got it.
@FASTSHIFT Plese review and merge this pr.