https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • d
    I dont wish to use a table because the goal is to look at the data, and to be able to know that its supposed to be rendered into some sort of chart(as per the uniform interface) and what that chart my look like
  • d
    ive exerimented a little with SVGs, so im optimistic it can work if I use web elements to produce SVGs and insert those into the shadow DOM
  • d
    Copy code
    html
<div style="height:400px; width:400px;">
  <svg viewBox="0 0 400 400">  
    <line x1="0" y1="150" x2="0" y2="400" stroke="black" />
    <line x1="0" y1="400" x2="400" y2="400" stroke="black" />
    <rect x="10" y="195" width="50" height="200" fill="none" stroke="black"/>
    <rect x="70" y="245" width="50" height="150" fill="none" stroke="black"/>
    <rect x="130"  y="320" width="50" height="75" fill="none" stroke="black"/>
    <rect x="190"  y="320" width="50" height="75" fill="none" stroke="black"/>
    <rect x="250"  y="195"width="50" height="200" fill="none" stroke="black"/>
    <rect x="310" y="195" width="50" height="200" fill="none" stroke="black"/>             
  </svg>
</div>
  • d
    which would be, in my custom element
    Copy code
    html
<my-chart>
  <bar-chart-dataset>
    <bar-chart-category name="my-cat"> 
      <data-point x="10" y="200"></data-point>
      <data-point x="20" y="150"></data-point>
      <data-point x="30" y="75"></data-point>
      <data-point x="40" y="75"></data-point>
      <data-point x="50" y="200"></data-point>
      <data-point x="60" y="200"></data-point>
    </bar-chart-category>
  </bar-chart-dataset>
</my-chart>
  • d
    ofc the example is missing axis labels, but the main point is to create something that knows HTML tags and how to render them into charts, and drive the chart from the server side
  • d
    with something like this, you can drive charts using HTMX interactions (on click does for example breakdown by category, a websocket/sse handler could update a timeseries, etc)
  • d
    as SVG elements can have "onclick" and other such events posted
  • d
    so you can pass any attributes from ``data-point`` to its underlying rendered element and do actual magic
  • m
    do you intend to use htmx attributes on a dumb/static chart to load this DOM? You can't degrade from this since you've put custom elements inside custom element
  • m
    you could also do (similar to Deniz's suggestion)
    Copy code
    html
<my-chart source="/my/data/source">
<table>
  <tbody >
     <tr><td>something<td>something
     <tr><td>something<td>something
     <tr><td>something<td>something
     <tr><td>something<td>something
     <tr><td>something<td>something
     ....
  </tbody>
</table>
</my-chart>
  • d
    It's sadly a side effect, but the benefits to me are too nice to miss out on
  • d
    I intend for the charts to be somewhat interactive
  • m
    well, I dont think it's bad. if you combine htmx and your chart code into a bundle and it manages to load this fragment it should work right?
  • m
    a few items mentioning the react -> htmx port on the orange site, they are on the new tab (second page right now)
  • m
    if you have a moment, an upvote would be appreciated, it would be great to get one on the front page
  • m
    nice
  • m
    now on the front page
  • b
    Short question: I have a table with infinite scrolling:
    Copy code
    html
<table class="table is-striped is-narrow is-hoverable">
    <thead><tr> ... </tr></thead>
    <tbody id="PartsList">
        {% include "parts_list.html" %}
    </tbody>
</table>
    the table is using infinite scrolling:
    Copy code
    html
{% for shelfstation in shelfstation_list %}
    {% include "ss_detail.html" %}
{% endfor %}
    and ss_detail.html:
    Copy code
    html
<tr id="{{ part.serial }}-row"
    {% if forloop.last and next_page_qs %}
        hx-get="{% url 'shelfstations' %}?{{next_page_qs}}" 
        hx-trigger="revealed" 
        hx-swap="afterend" 
    {% endif %}>
    <td class="">...</td> 
    <td class="">...</td>
</tr>
    I am having troubles adding a 
    hx-get="{% url 'parts' %}?page={{ page_obj.number }}"
    including a 
    hx-trigger="every 10s"
    somewhere so that the infinite scrolling is not "destroyed" on trigger.
  • b
    I want to update that table every seconds, but not give up my infinite scrolling position
  • m
    article is now top on red site too
  • g
    no comments though
  • m
    hmm, a pretty sophisticated use case. What does polling the table update?
  • m
    WELL DENIZ
  • m
    WE"RE WAITING
  • g
    i want to go to bed
  • g
    but i want to read the comments
  • m
    lol, welcome to my life
  • b
    haha
  • m
    i don't want to read the comments, but I want to read the comments
  • g
    why don't they make a forum with good comments only
1...858859860...1146Latest