How to use the mem.free function in mem

axios.get('/metrics').then(function (res) {
                    var metrics = res.data,
                        mem = metrics['mem'],
                        memFree = metrics['mem.free'],
                        heap = metrics['heap'],
                        heapUsed = metrics['heap.used'],
                        heapCommited = metrics['heap.committed'],
                        activeSession = metrics['httpsessions.active'];
                    // Memory
                    data.setValue(0, 1, 100 * memFree / mem);
                    // Heap (Used)
                    data.setValue(1, 1, 100 * heapUsed / heap);
                    // Heap (Commited)
                    data.setValue(2, 1, 100 * heapCommited / heap);
                    chart.draw(data, options);
                    // Active Session
                    document.getElementById('activeSession').innerText = activeSession;
                });
            }

    'min': slice => ({ '-1': Math.min(slice['mem.free']['0'], slice['mem.used']['-1']) }),
  }

fill: secondaryColor,
      data: [
        { value: metricsInfo['heap.committed'], fill: tc(positiveColor).setAlpha(0.8).toString() },
        { value: metricsInfo['heap'], fill: tc(secondaryColor).setAlpha(0.3).toString() }
      ]
    }

    const JVMTableData = metricsInfo && [
      ['Available CPUs', metricsInfo.processors],
      ['Uptime', ms2hrs(metricsInfo.uptime)],
      ['Current loaded classes', metricsInfo['classes.loaded']],
      ['Total classes', metricsInfo['classes']],
      ['Unloaded classes', metricsInfo['classes.unloaded']]
    ]

    const freeMemory = metricsInfo && `${(metricsInfo['mem.free'] / 1000).toFixed(2)} MB`
    const usedMemory = metricsInfo &&
      `${((metricsInfo['mem'] - metricsInfo['mem.free']) / 1000).toFixed(2)} MB`
    const totalMemory = metricsInfo && `${(metricsInfo['mem'] / 1000).toFixed(2)} MB`

    const freeHeap = metricsInfo && `${(metricsInfo['heap.committed'] / 1000).toFixed(2)} MB`
    const usedHeap = metricsInfo &&
      `${((metricsInfo['heap'] - metricsInfo['heap.committed']) / 1000).toFixed(2)} MB`
    const totalHeap = metricsInfo && `${(metricsInfo['heap'] / 1000).toFixed(2)} MB`

    return (
      <div>
        {userData &amp;&amp;
        <div style="{styles.widgets}">
          {healthTableData &amp;&amp; 
            
            </div></div>

$.get('/admin/actuator/metrics', function (data) {
                        $('#mem-info').text(LangUtils.kbToSize(data['mem.free']) + '/' + LangUtils.kbToSize(data.mem));
                        $('#uptime').text(LangUtils.millisecondToDate(data.uptime));
                        $('#httpsession').text(data['httpsessions.active'] + ' 个');
                    });
                },

ctrl.$onChanges = function () {
      ctrl.memory = {
        total: ctrl.metrics.mem,
        used: ctrl.metrics.mem - ctrl.metrics['mem.free'],
        unit: 'K'
      };
      ctrl.memory.percentUsed = $filter('number')(ctrl.memory.used / ctrl.memory.total * 100, 2);

      ctrl.heap = {
        total: ctrl.metrics['heap.committed'],
        used: ctrl.metrics['heap.used'],
        init: ctrl.metrics['heap.init'],
        max: ctrl.metrics['heap.max'] || ctrl.metrics.heap,
        unit: ctrl.metrics['heap.max'] ? 'B' : 'K'
      };
      ctrl.heap.percentUsed = $filter('number')(ctrl.heap.used / ctrl.heap.total * 100, 2);

      ctrl.nonheap = {
        total: ctrl.metrics['nonheap.committed'],
        used: ctrl.metrics['nonheap.used'],

]).then(function(values) {
        $scope.metrics = new Array();

        $scope.metrics["mem.max"]  = values[0].data['measurements'][0]['value'];
        $scope.metrics["mem.used"] = values[1].data['measurements'][0]['value'];
        $scope.metrics["mem.free"] = values[0].data['measurements'][0]['value'] - values[1].data['measurements'][0]['value'];
        $scope.humanizedUptime = moment.duration(values[2].data['measurements'][0]['value'], 'seconds').humanize();

        var max = 10;
        var cur = $scope.memoryConfig.series[0].data.length;

        if (cur === max) {
            $scope.memoryConfig.series[0].data.splice(0, 1);
            $scope.memoryConfig.series[1].data.splice(0, 1);
            $scope.memoryConfig.xAxis.categories.splice(0, 1);
        }
        $scope.memoryConfig.series[0].data.push(formatKibiBytes($scope.metrics["mem.free"]));
        $scope.memoryConfig.series[1].data.push(formatKibiBytes($scope.metrics["mem.used"]));
        $scope.memoryConfig.xAxis.categories.push($filter('date')(new Date(), "HH:mm:ss"));
    });
    };

const diskTableData = healthInfo && [
      ['Status', ],
      ['Free space', (healthInfo.diskSpace.free / 1000000000).toFixed(2) + ' GB'],
      ['Total space', (healthInfo.diskSpace.total / 1000000000).toFixed(2) + ' GB'],
      ['Threshold', (healthInfo.diskSpace.threshold / 1000000000).toFixed(2) + ' GB']
    ]

    const memChartProps = metricsInfo && {
      cx: 100,
      cy: 100,
      innerRadius: 0,
      outerRadius: 100,
      fill: secondaryColor,
      data: [
        { value: metricsInfo['mem.free'], fill: tc(positiveColor).setAlpha(0.8).toString() },
        { value: metricsInfo['mem'], fill: tc(secondaryColor).setAlpha(0.3).toString() }
      ]
    }

    const heapChartProps = metricsInfo && {
      cx: 100,
      cy: 100,
      innerRadius: 0,
      outerRadius: 100,
      fill: secondaryColor,
      data: [
        { value: metricsInfo['heap.committed'], fill: tc(positiveColor).setAlpha(0.8).toString() },
        { value: metricsInfo['heap'], fill: tc(secondaryColor).setAlpha(0.3).toString() }
      ]
    }

$scope.memFree = function() {
        if ($scope.metrics) {
            return { "width": ($scope.metrics['mem.free'] / $scope.metrics.mem)*100 + "%" };
        }
        return {"width": "0%"};
    };